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?

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?

• javascript
• jquery

• It gets the last one... So the last one might have the value 4? – Praveen Kumar Purushothaman Commented Oct 18, 2016 at 17:32
• 1 Attribute values must be quoted. $('.messages[data-conversationId="4"]'). – Heretic Monkey Commented Oct 18, 2016 at 17:32
• 1 You are missing quotes: $('.messages[data-conversationId="4"]')should work? – user7028020 Commented Oct 18, 2016 at 17:32
• 3 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 Commented Oct 18, 2016 at 17:34
• 1 @PranavCBalan had the right answer, do you want to submit ' update attribute value using attr() method ' as an answer? – Nick H Commented Oct 18, 2016 at 17:42

2 Answers 2

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

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