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个......就像

一样

.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一个类＆＃34;单位＆＃34;

像：

<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

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

3 个答案: