Use an array to search element for data-attribute and hide it

Question

I want to search through a class for elements that have data-id attribute that matches in the array, and hide them.

The HTML:

<li class="list" data-id="1">one</li>
<li class="list" data-id="2">two</li>
<li class="list" data-id="3">three</li>
<li class="list" data-id="4">four</li>

I have an array: var dataIDcheck = ['1', '3']

Any ideas on how I can search through the class .list and hide 1 and 3 (or whatever is in the array)?

score 2 · Accepted Answer · answered Jan 03 '13 at 16:36

2

var dataIDcheck = ['1', '3'];
$('[data-id="' + dataIDcheck.join('"], [data-id="') + '"]').hide();

http://jsbin.com/ojipaw/1/

answered Jan 03 '13 at 16:36

Yoshi

54,081
14
89
103

score 1 · Answer 2 · answered Jan 03 '13 at 16:33

1

You can use the filter and inArray function

 $('.list').filter(function(){
      return $.inArray($(this).data('id'),dataIDcheck) > -1
 }).hide(); // <-- hides any elements that have data-id found in array

answered Jan 03 '13 at 16:33

wirey00

33,517
7
54
65

Marat Tanalin · Answer 3 · 2013-01-03T16:35:25.897

0

var ids   = [1, 3],
    count = ids.length,
    parts = [];

for (var i = 0; i < count; i++) {
    parts.push('[data-id="' + ids[i] + '"]');
}

var selector = parts.join(',');

var elems = document.querySelectorAll(selector);

This works with standard DOM (IE8+) and does not need any libraries. It also may make sense for you to see querySelectorAll() documentation.

edited Jan 03 '13 at 16:35

answered Jan 03 '13 at 16:21

Marat Tanalin

13,927
1
36
52

Is that using the array or specifying [data-id="1"], [data-id="3"]? – JayDee Jan 03 '13 at 16:25
You can easily construct selector manually using any number of any ids. I've added more detailed example. – Marat Tanalin Jan 03 '13 at 16:33

score 0 · Answer 4 · answered Jan 03 '13 at 16:32

0

for (id in dataIDcheck) {
    $('.list[data-id=' + dataIDcheck[id] + ']').hide()
}

answered Jan 03 '13 at 16:32

buttscicles

3
1
4

score 0 · Answer 5 · answered Jan 03 '13 at 16:33

0

why not jquery's inArray()

var dataIDcheck = [1, 3];


$('.list').each(function() {
    if($.inArray($(this).data("id"),dataIDcheck) > -1) {
      $(this).fadeOut(); 
    }
});

fiddle

answered Jan 03 '13 at 16:33

AbstractChaos

4,211
1
19
28

Use an array to search element for data-attribute and hide it

5 Answers5