jQuery on click, build array of data attributes

Question

I've got a list whereby on click of the anchor, i look at the parent li and get the data-brand attribute and store this in an array and upon click of another item add this to the array. I also want to so if you click an item already in the array it is removed.

Is this reasonably straight forward?

HTML

 <div class="search-data__filter">
      <ul>
        <li data-brand="prada">
          <a href="#" class="chkbox">Prada</a>
        </li>
        <li data-brand="oakley">
          <a href="#" class="chkbox">Oakley</a>
        </li>
        <li data-brand="ray-ban">
          <a href="#" class="chkbox">Ray-Ban</a>
        </li>
        <li data-brand="nike">
          <a href="#" class="chkbox">Nike</a>
        </li>
      </ul>
    </div>

jQuery so far:

$(document).ready(function (){

    checkbox = $(".chkbox");

    checkbox.on("click", function(e){
        $(this).toggleClass("is-checked");

        var ar = $(this).parent("li").map(function () {
            return $(this).attr('data-brand');
        });

        console.log(ar);

        e.preventDefault();
    });

});

My log is only storing a single data-attribute and I assume it may be because I am essentially only mapping the parent whom is being clicked? Can't workout how I'd expand on this.

Scimonster · Accepted Answer · 2015-01-22 16:02:19Z

2

You need to actually save the stuff in an array:

$(document).ready(function (){

    var checkbox = $(".chkbox");
    var brands = []; // new array

    checkbox.on("click", function(e){
        $(this).toggleClass("is-checked");

        brands.push($(this).parent("li").attr('data-brand'));
        // naive

        console.log(brands);

        e.preventDefault();
    });

});

This is simple, just adds it. Now, we need to check if it is in there before adding, and if so, remove it:

$(document).ready(function (){

    var checkbox = $(".chkbox");
    var brands = []; // new array

    checkbox.on("click", function(e){
        $(this).toggleClass("is-checked");

        var b = $(this).parent("li").attr('data-brand'); // so we don't have to write it out each time

        if (brands.indexOf(b)!=-1) {
            brands.splice(brands.indexOf(b),1);
        } else {
            brands.push(b);
        }

        console.log(brands);

        e.preventDefault();
    });

});

answered Jan 22, 2015 at 16:02

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gerico Over a year ago

Amazing. Thank you for this. Another lesson learned, hopefully. Works beautifully.

Gerico Over a year ago

could this be built into a function if I wanted to use it across a wider range of lists?

Scimonster Over a year ago

I suppose it would be possible, but not super easy.

Gerico Over a year ago

From reading up on it, I get the feeling something that might be suited to a pure JavaScript approach

billyonecan · Accepted Answer · 2015-01-22 16:10:47Z

0

Just change the selector from $(this) to $('a.is-checked'), that way you'll be working with a collection of "checked" anchors.

var ar = $('a.is-checked').parent('li').map(function () {
    return $(this).attr('data-brand');
}).get();

Here's a fiddle

answered Jan 22, 2015 at 16:10

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

Collectives™ on Stack Overflow

jQuery on click, build array of data attributes

2 Answers 2

4 Comments

Here's a fiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related