Jquery Data属性选择器不起作用

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?

Answer 1

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

Answer 2

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