动态列表隐藏空元素

Question

我有这段代码：

<div class="listContainer">
<ul>
    <div class="hidediv">
    <li class="cacontent">
        <ul class="pcontent">
            <li class="listp">a</li>
        </ul>
    </li>
</ul>

<ul>
    <div class="hidediv">
    <li class="cacontent">
        <ul class="pcontent">
            <li class="listp">a</li>
        </ul>
    </li>
</ul>

当空白时，我需要隐藏div。

问题是它是一个动态列表，所以重复所有类和div。所以我遇到了一些代码问题，并隐藏了内容。

抱歉我的英文

感谢。

更新....对不起的解释为

<div class="listContainer"> <- Main Container Product List
<ul> 
    <div class="hidediv"><p>Title</p> <- Product List Category Title
    <li class="cacontent"> 
        <ul class="pcontent"> 
            <li class="listp"></li> <- Product List
        </ul>
    </li>
    </div>
</ul>
</div>

1ºBuccle：列出所有类别。

2ºBuccle：列出产品类别。

示例Bucle：

<div class="listContainer">
<ul>
    <div class="hidediv"><p><--- Category 1 ---></p>
    <li>
        <ul class="pcontent">
        </ul>
    <li>
    </div>
    <div class="hidediv"><p><--- Category 2 ---></p>
    <li>
        <ul class="pcontent">
        </ul>
    <li>
    </div>
    <div class="hidediv"><p><--- Category 3 ---></p>
    <li>
        <ul class="pcontent">
            <li class="listp"><div id="hidediv"><p><--- Product 1 ---></p>
            <li class="listp"><div id="hidediv"><p><--- Product 2 ---></p>
            <li class="listp"><div id="hidediv"><p><--- Product 3 ---></p>
        </ul>
    <li>
    </div>
    <div class="hidediv"><p><--- Category 4 ---></p>
    <li>
        <ul class="pcontent">
        </ul>
    <li>
    </div>
    <div class="hidediv"><p><--- Category 5 ---></p>
    <li>
        <ul class="pcontent">
            <li class="listp"><div id="hidediv"><p><--- Product 1 ---></p>
            <li class="listp"><div id="hidediv"><p><--- Product 2 ---></p>
            <li class="listp"><div id="hidediv"><p><--- Product 3 ---></p>
        </ul>
    <li>
    </div>
    <div class="hidediv"><p><--- Category 6 ---></p>
    <li>
        <ul class="pcontent">
        </ul>

    <li>
    </div>
<ul>
</div>

我需要隐藏列表元素Empty，

Answer 1

我不明白什么时候是空的？

这里的动态部分是什么？

如果这部分是动态的：

<ul> <div id="hidediv"> <li class="cacontent"> <ul class="pcontent"> <li class="listp">a</li> </ul> </li> </ul>

简单的方法是，当您找到（事情？不知道，您没有提及）从您创建这些动态列表的代码中是空的时，您不应该创建此列表项。

作为一种最佳实践，你必须找到一种方法来使你的html组件具有独特的id，然后我建议你应该把class＆＃34;任何名字＆＃34;每个div。类名必须是内部所有div的通用。

假设您的div类是＆＃34; hidDiv＆＃34;。你应该对jQuery：

$(document).ready(function () { $('.hidDiv').each(function () { <you can find is div have its children by using $(this).children(), and apply some logic> }); });

希望这个想法对你有所帮助。

<强> ----------------------------更新--------------- ---------------

您的代码仍然无效代码，div和p不是ul中的有效组件。 p将对列表组件进行网格对齐。

这个怎么样：

<div class="listContainer"> <ul> <li class="category"> <--- Category 1 --->
<ul class="pcontent"> </ul> </li> <li class="category"> <--- Category 2 ---> <ul class="pcontent"> </ul> </li> <li class="category"> <--- Category 3 ---> <ul class="pcontent"> <li class="listp"><--- Product 1 ---></li> <li class="listp"><--- Product 2 ---></li> <li class="listp"><--- Product 3 ---></li> </ul> </li> <li class="category"> <--- Category 4 ---> <ul class="pcontent"> </ul> </li> <li class="category"> <--- Category 5 ---> <ul class="pcontent"> <li class="listp"><--- Product 1 ---></li> <li class="listp"><--- Product 2 ---></li> <li class="listp"><--- Product 3 ---></li> </ul> </li> <li class="category"> <--- Category 6 ---> <ul class="pcontent"> </ul> </li> </ul> </div>

在java-script文件中添加以下jQuery代码： $(document).ready(function () { $(".listContainer").find(".category").each(function (i) { var plist = $(this).find(".pcontent").find("li"); if (plist.length <= 0) { $(this).attr("style", "display:none;"); } }); });

这会给你你想要的输出。