CODEWITHSUNDEEP
jqueryhtml
somejkuser
somejkuser

Reputation: 9040

JQuery data html attribute not returning value

Here is my html:

<ul class="inboxList">
    <li data-selecttype='global|mailbox|inbox'>Inbox</li>
</ul>

And here is my jquery code:

$(".inboxList").children().each(function(child){
    console.log($(child).data("selecttype"));
});

I also tried taking out the $() in the child:

$(".inboxList").children().each(function(child){
    console.log(child.data("selecttype"));
});

But that didn't work.

My return values are null and undefined. I was expecting the return value to be global|mailbox|inbox What am I doing incorrectly?

Thanks for the assistance!

Upvotes: 0

Views: 123

Answers (2)

painotpi
painotpi

Reputation: 6996

Try this,

$(".inboxList").children().each(function(){
    console.log($(this).data("selecttype"));
});

According to the definition on jQuery's site, .each() takes 2 arguments, index and Element, where,

index - is the index of the current matched element in the jQuery object returned by .each()

And

Element - is the current element, in your case 

<li data-selecttype=​"global|mailbox|inbox">​Inbox​</li>​

Read more about .each()

Fiddle

Upvotes: 0

PSL
PSL

Reputation: 123739

You are using the wrong argument from each's callback. You should use the second arg for the element or ditch the args and just use this. it should be:

$(".inboxList").children().each(function(i, child){ // each has 2 args first one is index and second one is the element.
    console.log($(child).data("selecttype")); //Or this

    console.log($(this).data('selecttype'));
});

http://jsfiddle.net/JUyHg/

.each( function(index, Element) )

Upvotes: 3

Related Questions