隐藏所有的孩子，但每个元素的第一组

Question

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

第一wrap-inner我已经试过像这样：（https://jsfiddle.net/s88jn0yo/）

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

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

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

Answer 2

您错过了小提琴中的(。按F12查看浏览器控制台，查看这些错误。

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

应该

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

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

Answer 3

而不是使用JavaScript，除非必要，你可以使用CSS：

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

在这里看到一个例子：https://jsfiddle.net/q5jLb4bf/

Answer 4

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

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

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

，如果你想通过jQuery

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