jQuery hide elements if matched to list regardless of order

Question

I need to hide span elements if they match words in a 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 done correctly, it should hide 'hello' and 'you', but not 'hi'

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

But I need to loop through each span element in wordBank_Words, and compare them against each word in the wordList, and only hide if there is a match. They need to be compared regardless of order.

How can this be done?

look at `Array.indexOf()` – Arun P Johny Oct 06 '15 at 04:54 — Arun P Johny, Oct 06 '15 at 04:54

Tushar · Accepted Answer · 2015-10-06T05:41:40.580

6

No need of looping over all the elements.

You can create an attribute-value selector from array by joining them to form the correct selector.

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

will create a selector as

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

which then can be passed to 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>

You can also use attr/prop methods as follow

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>

edited Oct 06 '15 at 05:41

answered Oct 06 '15 at 04:57

Tushar

85,780
21
159
179

_"Sidenote: word is not a valid attribute"_ ? At `html5` document ? Why would attribute not be valid ? – guest271314 Oct 06 '15 at 05:18
@guest271314 Yes, updated. Also added the link to the post. You can find `You can add custom attributes to your elements at will. But that will make your document invalid` in the answers. – Tushar Oct 06 '15 at 05:25
_"3.2.3.1 Attributes Except where otherwise specified, attributes on HTML elements may have any string value, including the empty string. Except where explicitly stated, there is no restriction on what text can be specified in such attributes."_ http://html.spec.whatwg.org/multipage/dom.html#attribute – guest271314 Oct 06 '15 at 05:36
@guest271314 As you can see in the answer http://stackoverflow.com/a/1735783/2025923 the doctype has to change – Tushar Oct 06 '15 at 05:39
`html5` does not have a `dtd` – guest271314 Oct 06 '15 at 05:40
1

Yes "invalid" , though `Error: Attribute word not allowed on element span at this point.` could be ignored ; see http://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag/1735783#comment1615649_1735268 – guest271314 Oct 06 '15 at 05:49
@guest271314 That's what I was trying to say, that the page is invalid, to make it valid use `data-*` attributes – Tushar Oct 06 '15 at 05:51

score 2 · Answer 2 · edited Oct 06 '15 at 05:03

I would change the word-attributes to html 5 valid data-attributes:

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

Then loop through the spans and hide the ones on the list:

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

score 2 · Answer 3 · answered Oct 06 '15 at 04:57

You can use Array.indexOf() to check whether the word exists in the array like

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>

guest271314 · Answer 4 · 2015-10-06T05:14:19.940

Try adding | to RegExp using .join(), !== null after .match() to condition

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>

jQuery hide elements if matched to list regardless of order

4 Answers4