Question

我使用以下代码按数据属性值选择元素。

HTML代码为：

...
  <li data-conversation-id="2"></li>
...

和JavaScript代码：

$li = $conversations.find("[data-conversation-id='" + conversation_id + "']");

我已经更新了我的模板代码，现在会在jQuery中通过.data('conversation-id')在元素上设置conversation-id而不是内联属性。

.find()选择器不再有效。

Answer 1

使用过滤器检查属性，但您需要选择所有子项。为了提高性能，需要一个减少堆栈的选择器。你可以使用这样的东西：

$li = $conversations.find("*").filter(function(){
    return $(this).data("conversation-id") == conversation_id;
});

如果您的元素始终具有该属性或属于'[data-conversation-id]' ，则使用'li'或'*'代替li可以获得良好的性能提升

Answer 2

您可以将.filter()与.data()

结合使用

像

var li = $('li').filter(function(){
    return $(this).data('conversation-id') == conversation_id;
});

Answer 3

使用.attr('data-conversation-id', yourId)将其设置为内联属性，.find(..)调用即可。

此外，您可以使用filter方法.filter元素：

var $li = $("li").filter(function () {
    return $(this).data('conversation-id') === conversation_id;
});
// Do something with $li

filter(selector)

描述：将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

`filter(selector)`