javascript - 如何通过数据属性过滤选择器结果？

Question

我想显示

中的所有用户

<div id="users>
    <div class="item" data-username="ity">ity</div>
    <div class="item" data-username="ity2">ity2</div>
    <div class="item" data-username="ity3">ity3</div>
    <div class="item" data-username="hello">hello</div>
</div>

我的想法只是显示/隐藏数据包含用户名的项目

例如:我想显示包含 it 的所有 div，因此它应该显示 3 个 div。

我尝试过

$("div .item[data-username='it']").show();

问题是它仅影响 data-username 为 ity 的 div 元素。

我也尝试过:contains

$("div .item[data-username:contains('it')]")

这不好，因为它查找整个 div 而不是仅 data-username第四个 div 也会显示，因为它里面包含“item”

有什么想法吗？

Answer 1

您可以使用“属性包含”选择器:

$("div .item[data-username*='it']").show();

或者“属性开头为”选择器，具体取决于您的要求:

$("div .item[data-username^='it']").show();

另请注意，也可以使用 filter()，尽管这会比上述方法慢:

$('div .item').filter(function() {
    return $(this).data('username').indexOf('it') != -1;
}).show();