如何使用jquery或javascript计算类相同的html元素，但在特定的内部<ul>

Question

我需要在评论和子评论系统中的“ span”标签中显示文本：“显示/隐藏回复”。 因此，请想象一个向您提交评论的评论系统，该评论将显示在页面上。 然后另一个人回复此评论，此回复也立即显示。

我想要的是，当我没有任何答复时，此文本“显示/隐藏答复”不会显示在页面上，即某些逻辑，例如：If（no reply）{不显示“显示/隐藏答复” “}。 好吧，我创建了这样的jQuery代码：

$(document).ready(function(){
//This code below is to count how many classes ".div" I have
console.log($('.div').length);
if ($('.div').length > 0){
    $('span.text').text("Show/hide replies")
    }else{

    }
});

这是html：

<ul class="elements">
    <span class="text"></span>
    <li class="div">
        <div class="wraparound">Isso aêeee</div>
    </li>
    <li class="div">
        <div class="wraparound">Hein?</div>
    </li>
</ul>

<ul class="elements">
    <span class="text"></span>
    <li class="div">
        <div class="wraparound">O q faço?</div>
    </li>
    <li class="div">
        <div class="wraparound">N vai me responder?</div>
    </li>
</ul>

这些类必须命名相同，因为实际上它是while循环（php）的一部分，基于数据库查询（它查询数据库中有多少回复，并在其数量大于零时显示这些回复，简单）那样）。 问题是我想统计“ ul”标签中有“ .div”类列表的数量（这意味着我在主注释下有多少回复）。

如果激活页面检查器，浏览器控制台将显示“ .div”的总数（4），但我需要的只是第一个ul内的“ .div”编号，然后是第二个ul内的编号，依此类推。 如果“ .div”的数量为零，则不会显示“显示/隐藏回复”文本。 仅显示特定“ ul”（2）中“ .div”的数目大于零的时间。

但是控制台会计算总数（4）。 因此，如果我在第一个“ ul”中有一个答复（列表为“ .div”类），但在第二个“ ul”中没有任何答复，则控制台将对其进行计数，因为1大于零，文字将显示在标签“ span”内的“ ul”上方。 如何避免这种情况？

好吧，我刚刚编辑了我的问题，并将span标签放在“ ul”中，这样​​它就变成了孩子。 根据@Amit Kumar的帮助，我重新编写了jQuery代码并更改为：

 $(document).ready(function(){  
    $('ul.elements').each(function(index,ulElement){
        var listlength = $(ulElement).find('li.div').length;
        console.log(listlength);
        if (listlength > 0){
            $('span.text').not($(this).next('span.text')).text("Show/hide replies"); //Yeah, but... Which span?
            //$(this).next('span.text').text("");
        }
    });
});

唯一的问题是跨度。 我希望文本仅显示在“ li.div”的数量大于零的元素“ ul”的子级中。 这意味着您只能在确实有回复的地方显示回复。

Answer 1

$("ul.elements").each((index,ulElement)=>{
    const length = $(ulElement).find("li.div").length; 
    // length variable has number of replies for each post.
});