如果匹配列表,jQuery隐藏元素,无论顺序如何

Question

如果它们匹配wordList中的单词,我需要隐藏span元素.

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

所以,如果做得正确,它应该隐藏'你好'和'你',但不是'你好'

如果我这样做match('hello'),这正确地隐藏了HTML元素列表中的'hello'范围.

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

如何才能做到这一点？

Answer 1

无需循环遍历所有元素.

您可以通过连接它们以形成正确的选择器,从数组创建属性值选择器.

'[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>