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();
});

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

我是JS的初学者，所以可能有一个我不知道的解决方案：）

提前谢谢!!

Answer 1

问题是gt(0)不是函数。大概你的意思是get(0)，但即使这样也有问题，因为它会返回一个没有hide()方法的DOM元素。

要实现您的需求，您可以使用:gt选择器获取所有div，但第一个并隐藏它们：

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

据说你根本不需要JS / jQuery，因为它可以仅用CSS来实现：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

使用:not(:first-child)

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

或使用slice

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

Answer 4

您只需使用 CSS 即可解决此问题。 :not(:first-child)将选择除第一个之外的所有子元素

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您可以将not()用作

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

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

Answer 6

仅使用css pseudo selector not＆amp; first-child

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

好像你根本就没有这个JS。简单的CSS应该足够.ref_display + .ref_display：

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

但是jQuery当然也会起作用：

＆＃13;

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

＆＃13;

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

＆＃13;

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

7 个答案: