Question

有多个wrap-content s里面有多个wrap-inner s。现在，我只想显示每个wrap-inner

中的第一个wrap-content

$('.wrap-content .wrap-inner').slice(1).hide()

和（https://jsfiddle.net/s88jn0yo/1/）

$('.wrap-content'.each(function(){
    $(this).chilren('.wrap-inner').slice(1).hide()
});

两者都不起作用。期望的输出应该是：

111111
aaaaaaa

这是HTML

<div class="wrap-content">
  <div class="wrap-inner">
    111111
  </div>
  <div class="wrap-inner">
    222222
  </div>
  <div class="wrap-inner">
    3333333
  </div>
</div>

<div class="wrap-content">
  <div class="wrap-inner">
    aaaaaaa
  </div>
  <div class="wrap-inner">
    bbbbbbb
  </div>
  <div class="wrap-inner">
    ccccccc
  </div>
</div>

Answer 1

您可以使用 :not() 或 not() 和 :first-child 选择器

＆＃13;

$('.wrap-content .wrap-inner:not(:first-child)').hide();
// or $('.wrap-content .wrap-inner').not(':first-child').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap-content">
  <div class="wrap-inner">
    111111
  </div>
  <div class="wrap-inner">
    222222
  </div>
  <div class="wrap-inner">
    3333333
  </div>
</div>

<div class="wrap-content">
  <div class="wrap-inner">
    aaaaaaa
  </div>
  <div class="wrap-inner">
    bbbbbbb
  </div>
  <div class="wrap-inner">
    ccccccc
  </div>
</div>

＆＃13;

Answer 2

除非使用Javascript，否则您可以使用CSS：

.wrap-content .wrap-inner:not(:first-child) {
    display: none;
}

请在此处查看示例：https://jsfiddle.net/q5jLb4bf/

Answer 3

你错过了小提琴中的(。按F12键检查浏览器控制台是否存在类似错误。

$('.wrap-content'.each(...)

应该是

$('.wrap-content').each(...)

工作小提琴：https://jsfiddle.net/igor_9000/s88jn0yo/2/

Answer 4

如果您对~没有信心，也可以使用选择器:not()。

＆＃13;

.wrap-content :first-child ~ * {/* any other direct child */
  display:none;
  }
/* show them on hover ? */
.wrap-content:hover  :first-child ~ * {
  display:block;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap-content">
  <div class="wrap-inner">
    111111
  </div>
  <div class="wrap-inner">
    222222
  </div>
  <div class="wrap-inner">
    3333333
  </div>
</div>

<div class="wrap-content">
  <div class="wrap-inner">
    aaaaaaa
  </div>
  <div class="wrap-inner">
    bbbbbbb
  </div>
  <div class="wrap-inner">
    ccccccc
  </div>
</div>

＆＃13;

如果你想通过jQuery

运行它，请使用相同的选择器

$('.wrap-content :first-child ~ *').hide();

隐藏所有子项，但首先隐藏每组元素

4 个答案: