隱藏所有div元素，但顯示前兩個

Question

是否可以隱藏整個div並且僅顯示前2個實體。

<div class="inline-edit-col">
    <span class="title inline-edit-categories-label">Brands</span>
    <ul class="cat-checklist product_brand-checklist">
        <li id="product_brand-3039"><label class="selectit">acer</label></li>
        <li id="product_brand-3040"><label class="selectit">asus</label></li>
    </ul>

    <span class="title inline-edit-categories-label">Product Categories</span>
    <ul class="cat-checklist product_cat-checklist">
        <li id="product_cat-3039"><label class="selectit">mobile</label></li>
        <li id="product_cat-3040"><label class="selectit">car</label></li>
    </ul>

    <span class="title inline-edit-type-label">Product type</span>
    <ul class="cat-checklist product_cat-checklist">
        <li id="product_type-3039"><label class="selectit">electronics</label></li>
        <li id="product_type-3040"><label class="selectit">fashion </label></li>
    </ul>

    {lots of ul li elents as before }
</div>

這是html結構，但是我只需要顯示前兩個並顯示其他即

<div class="inline-edit-col">
    <span class="title inline-edit-categories-label">Brands</span>
    <ul class="cat-checklist product_brand-checklist">
        <li id="product_brand-3039"><label class="selectit">acer</label></li>
        <li id="product_brand-3040"><label class="selectit">asus</label></li>
    </ul>

    <span class="title inline-edit-categories-label">Product Categories</span>
    <ul class="cat-checklist product_cat-checklist">
        <li id="product_cat-3039"><label class="selectit">mobile</label></li>
        <li id="product_cat-3040"><label class="selectit">car</label></li>
    </ul>
</div>

有誰知道如何通過CSS或Javascript做到這一點？

我試圖CSS來隱藏第3、4，.. like

.product_cat-checklist{
  display:none;

 }

一切都一一隱藏。但這不是一個好習慣。 這就是為什么我在這里問

Answer 1

您可以使用CSS輕松完成此操作（無需使用Javascript）

span:nth-child(n+4) {
  display:none;       // hide all spans starting from 4th child
}
ul:nth-child(n+5) {
  display:none;      // hide all uls starting from 5th child
}

它是如何工作的：

div               // parent
|-- span          // 1st span - 1st child of parent
|-- ul            // 1st ul   - 2nd child of parent
|-- span          // 2nd span - 3rd child of parent
|-- ul            // 2nd ul   - 4th child of parent
|-- span          // 3rd span - 5th child of parent
|-- ul            // 3rd ul   - 6th child of parent
|-- span          // 4th span - 7th child of parent
|-- ul            // 4th ul   - 8th child of parent
|-- span          // 5th span - 9th child of parent
|-- ul            // 5th ul   - 10th child of parent
...

Answer 2

嘗試這個

使用jQuery GT

$('.inline-edit-col > *:gt(1)').hide(); //all childs after 2nd index (zero based index)

要么

使用array.slice

$('.inline-edit-col').children().slice(2).hide(); 

Answer 3

如果您給每個span-ul一個類別“單位”

喜歡：

<div class="inline-edit-col">
<div class="unit">
<span class="title inline-edit-categories-label">Brands</span>
<ul class="cat-checklist product_brand-checklist">
    <li id="product_brand-3039"><label class="selectit">acer</label></li>
    <li id="product_brand-3040"><label class="selectit">asus</label></li>
</ul>

</div>
<div class="unit">
<span class="title inline-edit-categories-label">Product Categories</span>
<ul class="cat-checklist product_cat-checklist">
    <li id="product_cat-3039"><label class="selectit">mobile</label></li>
    <li id="product_cat-3040"><label class="selectit">car</label></li>
</ul>
</div>

然后在CSS中：

.inline-edit-col * {
        display:none;
    }

.unit:nth-child(1),.unit:nth-child(2) {
    display:block;
}

會做的。 請注意，順序是至關重要的。

這是對CSS選擇器的引用： http : //www.w3schools.com/cssref/css_selectors.asp