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元素列表隱藏'你好'跨度。

但我需要遍歷wordBank_Words中的每個span元素，並將它們與wordList中的每個單詞進行比較，並且只有在匹配時纔會隱藏。無論順序如何，他們都需要進行比較。

這怎麼辦？

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

Answer 2

我會改變字屬性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

嘗試增加|到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>

Answer 4

您可以使用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>