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

问题描述：

有多个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>

答

您可以使用: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>

答

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

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

应该

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

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

答

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

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

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

运行它对于不支持'浏览器使用相同的选择：not'你可以做'.wrap，内{display：none; } .wrap-inner：first-child {display：block; }' –

哇。 '：not（）'比我想的要好得多。一定会变老。 –

答

如果您对: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();

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

相关推荐