How do I hide all divs with a class name except those contained in an array of indices. With or without jquery

Question

I have a list of divs:

<div class="person"></div>
<div class="person"></div>
<div class="person"></div>

I want to hide all of the divs except the 107th and the 2nd.

I tried using jquery filter , but couldn't quite wrap my head around a solution.

Answer 1

You can filter (zero based)

var arr = [3, 107];

$('.person').filter(function(i) {
    return $.inArray((i+1), arr) == -1;
}).hide();

FIDDLE

Answer 2

jsFiddle Demo

Gather a list of the people, and then use .eq() to select them (it is 0 based). Here is a simple example:

var people = $('.person');
var exclude = people.eq(3).add(people.eq(5));
people.not(exclude).hide();

Answer 3

Use CSS selector or use Jquery's selector like this:

.person:nth-child(107) { display:none; }



$(".person").eq(106).hide();

Answer 4

You're looking for the "nth-child" selector.

The following will skip two and every other div will be selected by the CSS rules within.

div.person:nth-child(1n+2)

In your case:

div.person:nth-child(107), div.person:nth-child(2)
{
    /* Rules here */
}

Answer 5

Here is a pure JS solution, if that floats your boat, though straight-up CSS would also be an option:

[].forEach.call( document.querySelectorAll('div.person'), function(el) {
   el.style.display = 'none';
});

[].forEach.call(document.querySelectorAll('div.person:nth-child(2), div.person:nth-child(107)', function(el) {
   el.style.display = 'block';
})

Answer 6

DEMO FIDDLE

You can just use plain old CSS:

.person {
    display: none; 
}

.person:nth-child(2), 
.person:nth-child(107) { 
      display: block; 
}