隱藏所有的孩子，但每個元素的第一組

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