Javascript 动态列表隐藏空元素

我有以下代码：

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

a






a

当为空时，我需要隐藏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>

---

我不明白什么时候是空的

这里什么部分是动态的

如果该部分是动态的：




a



简单的方法是，当您在创建这些动态列表的代码中发现（不知道，您没有提到）为空时，不应该创建此列表项

作为一种最佳实践，您必须找到一种方法，使您的html组件具有唯一的ID，然后我建议您应该将类“any name”放在每个div中。类名称必须对其中的所有div通用

假设您的div类是“hidDiv”。您应该为jQuery设置权限：

$（文档）.ready（函数（）{
$（'.hidDiv'）。每个（函数（）{
});
});

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

------------------------------------更新----------------------

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

这个怎么样：





































并在java脚本文件中添加以下jQuery代码：

$（文档）.ready（函数（）{
$（“.listContainer”）.find（“.category”）.each（函数（i）{
var plist=$（this.find（.pcontent”）.find（“li”）；
如果（plist.length），则应将
id=“hidediv”
更改为
class=“hidediv”
首先，它甚至不是有效的HTML。你缺少结束div！你能澄清一下吗
当div为空时，我需要隐藏div。
你的HTML包含重复的ID
。如果可能的话，这应该避免，并且在通过Javascript中的ID编程访问元素时应该严格避免。ID必须是唯一的，你可以改用class，您可以通过检查div是否为空来隐藏这些div。。！
<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>