Jquery Data attribute selector not working

Question

I have this element

<div class="messages selected" data-conversationId=""></div>

The data-attribute conversationId is set dynamically like so:

$(".messages").data("conversationId", conversationId);

I am having issues using a selector to select this element by the data attribute.

$(".messages[data-conversationId=4]")

Returns empty array. Interestingly:

$(".messages").data("conversationId")

returns 4

What is wrong with my selector?

It gets the last one... So the last one might have the value 4? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Oct 18, 2016 at 17:32
Attribute values must be quoted. $('.messages[data-conversationId="4"]'). — Heretic Monkey
– Heretic Monkey, Commented Oct 18, 2016 at 17:32
You are missing quotes: $('.messages[data-conversationId="4"]')should work? — user7028020
– user7028020, Commented Oct 18, 2016 at 17:32
I think you are updating data attribute using data() method which just update it's property not it's attribute.... so you need to use filter() or update attribute value using attr() method — Pranav C Balan
– Pranav C Balan, Commented Oct 18, 2016 at 17:34
@PranavCBalan had the right answer, do you want to submit ' update attribute value using attr() method ' as an answer? — Nick H
– Nick H, Commented Oct 18, 2016 at 17:42

Boieriu Alexandru · Accepted Answer · 2016-10-18 17:43:45Z

17

If you set your dynamic attribute via jquery's .data() you will have the above problem.

However, if you set the dynamic attribute via jquery's .attr() method, you won't have this problem

Example here: https://jsfiddle.net/6dn5wjL8/8/

HTML

<div id="test1" class="messages selected" data-conversationId="">testContent1</div>
<div id="test2" class="messages selected" data-conversationId="">testContent2</div>

JS:

// Will work
$("#test1").attr("data-conversationId", 4)
// Will not work
$("#test2").data("conversationId", 3)


alert("With selector .messages[data-conversationId=4] I found a div with this content: "+$(".messages[data-conversationId=4]").html())

alert("With selector .messages[data-conversationId=3] I found a div with this content: "+$(".messages[data-conversationId=3]").html())

answered Oct 18, 2016 at 17:43

Boieriu Alexandru

4922 silver badges7 bronze badges

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

Comments

Geeky · Accepted Answer · 2016-10-18 17:41:32Z

0

I think with this statement $('.message[data-conversationId=4]') , you are trying to select an element which has class message and who has data-conversationId as 4.

and this statement $(".message").data('conversationId'), in this example of yours would return undefined because in the markup you have mentioned it as data-conversationid=""

change the markup to data-conversationid="5" and check with the statement $(".message").data('conversationId'),it would return 5

Hope this helps

answered Oct 18, 2016 at 17:41

Geeky

7,5142 gold badges28 silver badges52 bronze badges

3 Comments

Nick H Over a year ago

Again, im setting it dynamically so I can't do this in the markup

Geeky Over a year ago

can you please include the code where you are setting it dynamically

Geeky Over a year ago

It will helps us to understand whats happening

Collectives™ on Stack Overflow

Jquery Data attribute selector not working

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related