如何隐藏除第一个以外的所有div？

Question

I'm using JQuery and I want to hide all div except the first but the problem is that I display my div (ref_display) by a for loop like that :

<div class="col-md-6 ref">
    {% for benefit in benefits %}

    <div class="col-md-6 ref_display">
        <h3>{{ benefit.name }}</h3>
        <p>{{ benefit.description }}</p>
        <div></div>
    </div>

    {% endfor %}
</div>

And when I use my JS code, it doesn't work :

$(function() {
    var ref = $('div.ref_display');
    ref.gt(0).hide();
});

I think JQuery considers that there is only one div when I write .gt(0) however, I have many of them displayed on my page..

I'm beginner in JS so there is probably a solution that I don't know :)

Thank you in advance !!

Answer 1

The issue is that gt(0) is not a function. Presumably you meant get(0) but even that has issues as it will return a DOM Element which doesn't have a hide() method.

To achieve what you need, you can use the :gt selector to get all divs but the first and hide them:

$('div.ref_display:gt(0)').hide();

That being said you don't need JS/jQuery for this at all as it can be achieved in CSS alone:

 div.ref { display: none; } div.ref:first-child { display: block; } 

 <div class="col-md-6 ref">1</div> <div class="col-md-6 ref">2</div> <div class="col-md-6 ref">3</div> 

Answer 2

Try var ref = $('div.ref_display:gt(0)').hide();

 $(function() { $('div.ref_display:gt(0)').hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-6 ref"> <div class="col-md-6 ref_display"> First Div </div> <div class="col-md-6 ref_display"> Second Div </div> <div class="col-md-6 ref_display"> Third Div </div> </div> 

Answer 3

I want to hide all div except the first

Use :not(:first-child)

$('div.ref_display:not(:first-child)').hide();

Or use slice

$("'div.ref_display").slice(1).hide();

Answer 4

You can solve it by simply using CSS . :not(:first-child) will select all the child elements except the first one

 div:not(:first-child) { display: none;} 

 <div class="col-md-6 ref_display">1</div> <div class="col-md-6 ref_display">2</div> <div class="col-md-6 ref_display">3</div> 

Answer 5

You can use not() as

var ref = $('div.ref_display').not(':first').hide();

This will ignore the first element with div having class ref_display .

Answer 6

Using only css pseudo selector not & first-child

 .ref .ref_display:not(:first-child) { display:none; } 

 <div class="col-md-6 ref"> <div class="col-md-6 ref_display"> <h3>1</h3> <p>1</p> <div>X</div> </div> <div class="col-md-6 ref_display"> <h3>2</h3> <p>2</p> <div>Y</div> </div> <div class="col-md-6 ref_display"> <h3>3</h3> <p>3</p> <div>Z</div> </div> </div> 

Answer 7

Seems like you don't JS for this at all. Simple CSS should be sufficient .ref_display + .ref_display :

I want to hide all div except the first

But jQuery will work too of course:

 $('.ref_display + .ref_display').hide(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-6 ref_display">#1</div> <div class="col-md-6 ref_display">#2</div> <div class="col-md-6 ref_display">#3</div>