Question

我有这个元素

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

data-attribute conversationId动态设置如下：

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

我在使用选择器按数据属性选择此元素时遇到问题。

$(".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

希望这有帮助

Jquery Data属性选择器不起作用

2 个答案: