Jquery Data屬性選擇器不起作用

Question

我有這個元素

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

data-attribute conversationId動態設置如下：

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

我在使用選擇器通過data屬性選擇此元素時遇到問題。

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

返回空數組。 有趣的是：

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

返回4

我的選擇器出了什么問題？

Answer 1

如果通過jquery的.data（）設置動態屬性，則會出現上述問題。

但是，如果通過jquery的.attr（）方法設置動態屬性，則不會出現此問題

示例： 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

我認為使用此語句$（'。message [data-conversationId = 4]'），您正在嘗試選擇具有類消息且data-conversationId為4的元素。

這個語句$（“。message”）。data（'conversationId'），在你的這個例子中將返回undefined，因為在標記中你提到它為data-conversationid =“”

將標記更改為data-conversationid =“5”並使用語句$（“。message”）。data（'conversationId'）進行檢查，它將返回5

希望這可以幫助