如果匹配到列表，jQuery隐藏元素，无论顺序如何答案

【问题标题】：jQuery hide elements if matched to list regardless of order如果匹配到列表，jQuery隐藏元素，无论顺序如何
【发布时间】：2015-10-06 04:52:20
【问题描述】：

如果跨度元素与 wordList 中的单词匹配，我需要隐藏它们。

HTML：

<span class="wordBank_Words">
     <span word="hello"></span>
     <span word="you"></span>
     <span word="hi"></span>
</span>

JavaScript：

wordList = ['hello', 'how', 'are', 'you'];

$('.wordBank_Words span').each(function (index, val) {
    if ($(this).attr('word').match(wordList)) {
        $(this).hide();
    }
});

所以，如果操作正确，它应该隐藏“hello”和“you”，而不是“hi”

如果我使用match('hello')，这会正确地从 HTML 元素列表中隐藏“hello”范围。

但我需要遍历wordBank_Words 中的每个span 元素，并将它们与wordList 中的每个单词进行比较，只有在匹配时才隐藏。无论顺序如何，它们都需要进行比较。

如何做到这一点？

【问题讨论】：

看Array.indexOf()

标签： javascript jquery

【解决方案1】：

无需遍历所有元素。

您可以从数组中创建一个attribute-value 选择器，方法是将它们连接起来形成正确的选择器。

'[word="' + wordList.join('"], [word="') + '"]'

将创建一个选择器

[word="hello"], [word="how"], [word="are"], [word="you"]

然后可以传递给jQuery。

演示

var wordList = ['hello', 'how', 'are', 'you'];

var selector = '[word="' + wordList.join('"], [word="') + '"]';

$('.wordBank_Words').find(selector).hide();

span {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="wordBank_Words">
  <span word="hello">Hello</span>
  <span word="you">You</span>
  <span word="hi">Hi</span>
  <span word="not">Not Found</span>
</span>

你也可以使用attr/prop方法如下

var wordList = ["hello", "how", "are", "you"], re = wordList.join("|");

$(".wordBank_Words span").attr('word', function(index, val) {
  if (wordList.indexOf(val) > -1)
    $(this).hide();
  return val;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<span class="wordBank_Words">
  <span word="hello">hello</span>
  <span word="you">you</span>
  <span word="hi">hi</span>
</span>

【讨论】：

“旁注：单词不是有效属性” ?在html5 文件？为什么属性无效？
@guest271314 是的，已更新。还添加了帖子的链接。您可以在答案中找到You can add custom attributes to your elements at will. But that will make your document invalid。
"3.2.3.1 属性除非另有说明，否则 HTML 元素上的属性可以具有任何字符串值，包括空字符串。除非明确说明，对可以是什么文本没有任何限制在此类属性中指定。” html.spec.whatwg.org/multipage/dom.html#attribute
@guest271314 正如您在答案stackoverflow.com/a/1735783/2025923 中看到的，文档类型必须更改
是的“无效”，尽管Error: Attribute word not allowed on element span at this point. 可以被忽略；见stackoverflow.com/questions/1735230/…

【解决方案2】：

您可以使用Array.indexOf()来检查单词是否存在于数组中

var wordList = ['hello', 'how', 'are', 'you'];

$('.wordBank_Words span').each(function(index, val) {
  $(this).toggle(wordList.indexOf($(this).attr('word')) == -1)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wordBank_Words">
  <span word="hello"></span>
  <span word="you"></span>
  <span word="hi"></span>
</span>

【讨论】：

【解决方案3】：

我会将 word-attributes 更改为 html 5 有效数据属性：

<span class="wordBank_Words">
     <span data-word="hello"></span>
     <span data-word="you"></span>
     <span data-word="hi"></span>
</span>

然后遍历 span 并隐藏列表中的那些：

$(function () {
    var wordList = ['hello', 'how', 'are', 'you'];
    $(".wordBank_Words span").each(function () {
        if (wordList.indexOf($(this).data("word")) > -1) {
            $(this).hide();
        }
    });
});

【讨论】：

【解决方案4】：

尝试将| 添加到RegExp，使用.join()，!== null 在.match() 之后添加到条件

var wordList = ["hello", "how", "are", "you"], re = wordList.join("|");

$(".wordBank_Words span").each(function(index, val) {
  if ( $(this).attr('word').match(re) !== null ) {
    $(this).hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<span class="wordBank_Words">
  <span word="hello">hello</span>
  <span word="you">you</span>
  <span word="hi">hi</span>
</span>

【讨论】：