Javascript 隐藏所有div元素，但显示前两个

是否可以隐藏整个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>

每件事都一件一件地隐藏起来，但这不是好的做法。这就是我在这里问的原因

试试这个

使用jquery

或

使用

---

如果给每个跨度ul一个等级“单位”

比如：

我会的。 请注意，顺序很重要

---

这里是对CSS选择器的一个参考：

您可以使用CSS轻松完成它（无需Javascript）

它是如何工作的：

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

---

你试过什么吗？是的。我试着用css隐藏第三，第四，就像所有的东西一样，一个接一个地隐藏。但这不是一个好的做法。这就是为什么我在这里问代码出了什么问题？请留下否决投票的理由。你能检查一下这个问题吗

.product_cat-checklist{
  display:none;

 }

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

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

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

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

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

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