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/

I didn't see that one coming. and I am using an plugin for JQuery called tagit — user962206, Aug 01 '12 at 13:02
Well, correctly including the tagit lib from github, and fixing the fact that you've just broken the demo from [the author](http://webspirited.com/tagit/), I now get no errors. What exactly is your issue?? http://jsfiddle.net/puLeR/2/ — Jamiec, Aug 01 '12 at 13:12
@Jamiec I can't get the values of the 'data-values' of each li. — user962206, Aug 01 '12 at 13:23
Well, as Ive now demonstrated twice, it works fine. Once in a [clean fiddle](http://jsfiddle.net/RgH8N/), once by [fixing your fiddle](http://jsfiddle.net/puLeR/2/). Not sure how much more I can contribute to this, sorry! — Jamiec, Aug 01 '12 at 13:26

Christofer Eliasson · Accepted Answer · 2012-08-01T12:48:47.013

18

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/

edited Aug 01 '12 at 12:48

answered Aug 01 '12 at 12:37

Christofer Eliasson

32,939
7
74
103

It is still not working I've updated my code. it only returns me an undefined – user962206 Aug 01 '12 at 12:40
@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? – Christofer Eliasson Aug 01 '12 at 12:49
1

@user962206 I got your code to work in [this fiddle](http://jsfiddle.net/Zn3JA/1/) 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. – Christofer Eliasson Aug 01 '12 at 13:12
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 – user962206 Aug 01 '12 at 13:14
@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? – Christofer Eliasson Aug 01 '12 at 13:38

score 6 · Answer 2 · answered Aug 01 '12 at 12:45

6

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

should also work.

answered Aug 01 '12 at 12:45

Robin Drexler

4,307
3
25
28

2

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()`). – Camilo Martin Feb 03 '15 at 09:01

score 1 · Answer 3 · answered Aug 01 '12 at 12:40

1

You can use in your case:

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

in order to retrieve the value.

answered Aug 01 '12 at 12:40

S P

4,615
2
18
31

It is still not working I've updated my code please recheck my question – user962206 Aug 01 '12 at 12:43

score 1 · Answer 4 · answered Aug 01 '12 at 12:44

1

$(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")

answered Aug 01 '12 at 12:44

Clyde Lobo

9,126
7
34
61

What version of jquery are you using ? – Clyde Lobo Aug 01 '12 at 12:47
Ok.. what is the type of element with id `view-tags`? – Clyde Lobo Aug 01 '12 at 12:51

score 0 · Answer 5 · edited Sep 29 '15 at 10:02

0

   $('#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);

edited Sep 29 '15 at 10:02

HaveNoDisplayName

8,291
106
37
47

answered Sep 29 '15 at 09:12

Adriano Ernesto

11
1
6

please add little bit explanation to your answer. – HaveNoDisplayName Sep 29 '15 at 09:29
Include some explanation to your code, how your answer help or solve the question? – HaveNoDisplayName Sep 29 '15 at 09:52

Selecting custom data attributes in JQuery

5 Answers5

Linked