Question

如果span元素与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();
    }
});

所以，如果做得正确，它应该隐藏“你好”。并且＆＃39;你＆＃39;但不是＆＃39; hi＆＃39;

如果我match('hello')，请正确隐藏“你好”。从HTML元素列表开始。

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

如何做到这一点？

Answer 1

无需循环遍历所有元素。

您可以通过连接它们来创建一个attribute-value选择器，以形成正确的选择器。

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

将创建一个选择器

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

然后可以传递给jQuery。

<强>演示

＆＃13;

var wordList = ['hello', 'how', 'are', 'you'];

var selector = '[word="' + wordList.join('"], [word="') + '"]';

$('.wordBank_Words').find(selector).hide();

＆＃13;

span {
  display: block;
}

＆＃13;

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

＆＃13;

您还可以使用attr / prop方法，如下所示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

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

Answer 3

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

＆＃13;

var wordList = ['hello', 'how', 'are', 'you'];

$('.wordBank_Words span').each(function(index, val) {
  $(this).toggle(wordList.indexOf($(this).attr('word')) == -1)
});

＆＃13;

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

＆＃13;

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: