JQuery hides elements if they match the list, regardless of order

Question

I need to hide span elements if they match words in 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();
    }
});

So, if everything is done correctly, it should hide "hello" and "you", but not "hello"

If I do match('hello'), this correctly hides the "hello" span from the list of HTML elements.

But I need to scroll through each span in wordBank_Wordsand compare them with every word in the list of words, and only hide if there is a match. They need to be compared regardless of order.

How can I do that?

Answer 1

No need to go through all the elements.

- , .

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

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

jQuery.

Demo

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>

Hide result

---

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>

Hide result

Answer 2

word 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(), , ,

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>

Hide result

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

Hide result