Selecting custom data attributes in JQuery

Question

I have a list here

<ul id="demo2" data-name="demo2">
    <li data-value="here">here</li>
    <li data-value="are">are</li>
    <li data-value="some...">some</li>
    <!-- notice that this tag is setting a different value :) -->
    <li data-value="initial">initial</li>
    <li data-value="tags">tags</li>
</ul>

Where each li item has a custom data attribute. On JQuery how would get all of the values of each li element which has an attribute of data-value? I want to get their value.

but this code of mine doesn't seem to be working

        $('#view-tags').click(function(){
            $('li[data-value]').each(function(){
                alert($(this).data("value"));
            })
    });

The whole code on jsfiddle: http://jsfiddle.net/Zn3JA/

Engram

I didn't see that one coming. and I am using an plugin for JQuery called tagit – Engram

Well, correctly including the tagit lib from github, and fixing the fact that you've just broken the demo from the author, I now get no errors. What exactly is your issue?? jsfiddle.net/puLeR/2 – Collaboration

@Collaboration I can't get the values of the 'data-values' of each li. – Engram

Well, as Ive now demonstrated twice, it works fine. Once in a clean fiddle, once by fixing your fiddle. Not sure how much more I can contribute to this, sorry! – Collaboration

Answer 1

You are pretty close. You can use jQuery's .data() method to read attributes that start with data-. So in your case .data("value") since your attribute is data-value="some".

This should do it:

$('li[data-value]').each(function(){
     alert($(this).data("value"));
});

Here is a working fiddle as well: http://jsfiddle.net/nuphP/

Bunde

It is still not working I've updated my code. it only returns me an undefined – Engram

@Engram It should work! I have added a fiddle to my answer, that show the code in action. Are you getting any JS-errors? Are you referencing the jQuery library? – Bunde

@Engram I got your code to work in this fiddle by removing some JS-code that couldn't be called, since the fiddle was lacking the tagit.js file for instance. So this piece of code is working just fine. The problem lie somewhere else in your code. You probably has some other JS-error that break the execution. – Bunde

when I place the alert in at the very first line inside document.ready function it works but when I place it somewhere at the bottom it is not working anymore. which is very odd – Engram

@Engram It probably because some of the code in between throws an error, which stops the execution. There for the jQuery code never gets run when it's placed at the end. Find that error, and your code should work fine. Are you sure the .tagit() work as expected for instance? – Bunde

Answer 2

$(this).attr('data-value') 

should also work.

Hoppe

Note that this is slightly different: it will create a real attribute in the element. If you use .data(), the value will be stored in the DOM node, but won't behave like an HTML attribute; this may or may not be what you want; but it's important to note (e.g., CSS can select by real attributes set by .attr()). – Lament

Answer 3

You can use in your case:

 jQuery(this).data("value");

in order to retrieve the value.

Kwasi

It is still not working I've updated my code please recheck my question – Engram

Answer 4

$(this) refers to the current li element hence you get the element alerted.

You can try what the others have suggested i.e $(this).data("value")

Legofmutton

What version of jquery are you using ? – Legofmutton

Ok.. what is the type of element with id view-tags? – Legofmutton

Answer 5

   $('#view-tags').click(function(){
        $('li[data-value]').each(function(){
        var value = $(this).attr('data-value');
            alert(value);
        })
}); // this work normally

Takes the attribute value and stores the variable value

var value = $ (this) .attr ('date value');

After this warning the variable value

alert (value);

Pragmatism

please add little bit explanation to your answer. – Dogcart

Include some explanation to your code, how your answer help or solve the question? – Dogcart