动态列表隐藏空元素

Dynamic List Hide Empty Elements

本文关键字：元素 隐藏 列表 动态      更新时间：2023-09-26

我有这个代码：

<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º 颊部：列出所有类别。

2º 颊部：按类别列出产品。

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

我需要隐藏列表元素空，

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

这里的哪一部分是动态的？

如果此部分是动态的：

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

简单的方法是，当你找到（东西？不知道，你没有提到）从你正在创建这些动态列表的代码中是空的。

作为最佳实践，您必须找到一种方法来使您的 html 组件具有唯一 id，那么我建议您为每个div 放置类"任何名称".class名称对于内部的所有div 必须是通用的。

假设你的divs 类是"hidDiv"。你应该纠正一个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脚本文件中添加以下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;"); } }); });

这将为您提供所需的输出。

相关文章：