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

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

我也试过ity

:contains

这不好，因为它只查找WHOLE div而不是$("div .item[data-username:contains('it')]") 第四个div也将显示，因为它包含＆＃34; item＆＃34;内部

有什么想法吗？

Answer 1

您可以使用＆＃39;属性包含＆＃39;选择器：

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

或者＆＃39;属性以＆＃39;开头。选择器，取决于您的要求：

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

另请注意，filter()也可以使用，但这比上述方法慢：

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

Answer 2

不确定这是不是一个错字，但你的id＆＃34;用户＆＃34;未关闭，使html无效。

您可以使用下面的一些正则表达式样式选择器

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

如何按数据属性过滤选择器结果？

2 个答案: