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/

Solution 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/

Solution 2

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

should also work.

Solution 3

You can use in your case:

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

in order to retrieve the value.

Solution 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")

View more solutions

Comments

[user962206]

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

[Jamiec]

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

[user962206]

@Jamiec I can't get the values of the 'data-values' of each li.

[Jamiec]

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!

[user962206]

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

[user962206]

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

[Clyde Lobo]

What version of jquery are you using ?

[Christofer Eliasson]

@user962206 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?

[Clyde Lobo]

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

[Christofer Eliasson]

@user962206 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.

[user962206]

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

[Christofer Eliasson]

@user962206 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?

[Camilo Martin]

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()).

[HaveNoDisplayName]

please add little bit explanation to your answer.

[HaveNoDisplayName]

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