使用空格分隔值在自定义标签中查找包含特定值的元素答案

【问题标题】：Find elements containing specific value within custom tag with space-separated values使用空格分隔值在自定义标签中查找包含特定值的元素
【发布时间】：2016-11-09 06:15:56
【问题描述】：

想象一下我有这样的东西：

<li tags="1 3 "></li>
<li tags="2 3 "></li>
<li tags="4 "></li>

标签以空格分隔。我的想法是通过作为自定义属性放入的标签来查找<li>s，以免为了查找带有选定标签的项目而进行另一个查询。

有没有办法例如找到所有带有标签3 的<li>s，结果是这样的：

result = <li tags ="1 3 "></li><li tags ="2 3 "></li>

所以我可以把它放在像$('.container').html(result);这样的容器中

或者更好的方法：找到没有该标签的<li>s，并添加display: none的css属性

我觉得后者效率更高。

【问题讨论】：

标签： javascript jquery html css css-selectors

【解决方案1】：

是的，您可以使用~=: 来查找li 元素，在tags 属性值中有'3'：

$('li[tags~=3]');

并使用:not() 选择器查找不包含“3”的元素并将其隐藏：

 $('li:not([tags~=3])').hide();

如果您想使用特定类定位 li，请使用 li.class。

【讨论】：

有没有类似li[tags!~=3] 的东西？
我想我发现我的答案会回复你
真棒它就像一个魅力，无论如何也要添加一个类吗？我的意思是，如果我想将我的 li 与项目之类的类分开。我希望它只对他们有效。
$('li.project:not([tags~=3])').hide(); 这行得通吗？

【解决方案2】：

$(document).ready(function ()
        {
            var a = $("[tags*='3']");

        });

这将导致你在标签属性中包含 3 的 li。替代是 var a=$("li[tags*='3']")

【讨论】：

这也将匹配 13、23、31 等等。