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

Question

我正在使用 JQuery 并且希望隐藏除第一个之外的所有 div，但问题在于我通过 for 循环来显示我的 div (ref_display)：

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

当我使用我的JS代码时，它不起作用：

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

我认为当我写.gt(0)时，JQuery认为只有一个div，但是我在页面上显示了很多个div。

由于我是JS的初学者，可能有我不知道的解决方案 :)

提前感谢您！！

- Beno

---

你也可以使用.first()，例如ref.hide();ref.first().show();。 - freedomn-m

Answer 1

问题在于 gt（0）不是一个函数。可能你的意思是 get（0），但即使如此，它也存在问题，因为它将返回一个没有 hide()方法的DOM元素。

要实现您需要的效果，您可以使用：gt选择器获取除第一个之外的所有div并隐藏它们：

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

话虽如此，你完全不需要使用JS / jQuery来实现这一点，因为它可以仅通过CSS实现：

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>

- Rory McCrossan

---

这是所有答案中最好的答案。提供了适当的解释和更简单的解决方案。+1 - Alive to die - Anant

是的，谢谢你！！我知道这个，但我不知道为什么我想要把gt()当作一个函数来使用...有时候我真的很蠢 :') - Beno

@Beno 没问题，很高兴能帮助。 - Rory McCrossan

然而我知道CSS，但是之后我必须使用JQuery来完成其他任务。 ;) - Beno

Answer 2

我想隐藏除第一个之外的所有div

使用 :not(:first-child)

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

或者使用 slice

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

- gurvinder372

Answer 3

尝试使用以下代码：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>

- Mamun

Answer 4

您可以通过简单地使用CSS来解决它。 :not(:first-child)将选择除第一个子元素之外的所有子元素。

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>

- Aneesh R S

Answer 5

您可以使用not()作为

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

这将忽略第一个具有类ref_display的div元素。

- Ankit Agarwal

Answer 6

仅使用css 伪选择器 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>

- brk

---

谢谢，我知道，但我必须使用JQuery，因为之后还要做其他事情 :) - Beno

Answer 7

看起来你根本不需要JS。简单的CSS就足够了：.ref_display + .ref_display:

我想隐藏除第一个之外的所有div

当然，jQuery也可以使用：

$('.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>

- dfsq