javascript - 如何使用 jquery 或 javascript 计算类相同但在特定 内的 html 元素

Question

我需要在我的评论和子评论系统中显示“span”标签内的文本:“显示/隐藏回复”。因此，想象一下您向其提交评论并且该评论显示在页面上的评论系统。然后另一个人回复了这条评论，这条回复也会立即显示。

我想要的是，当我没有任何回复时，此文本“显示/隐藏回复”不会显示在页面上，即一些逻辑，例如:If(无回复){不显示“显示”/隐藏回复”}。好吧，我创建了一个像这样的 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”的数量，依此类推。如果“.div”的数量为零，则不会显示文本“显示/隐藏回复”。它仅在特定“ul”(2) 内的“.div”数量大于零时显示。

但是控制台统计的是总数(4)。因此，如果我在第一个“ul”中有一个回复(类为“.div”的列表)，但在第二个“ul”中没有回复，即使如此，控制台也会对其进行计数，因为 1 大于零，文本将出现在标签“span”内的“ul”上方。我该如何避免这种情况？

嗯，我刚刚编辑了我的问题，并将我的跨度标签放入“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("");
        }
    });
});

唯一的问题是跨度。我希望文本仅在跨度中显示，该跨度是元素“ul”的子元素(ren)，其“li.div”的数量大于零。这意味着您只能在确实有回复的情况下显示回复。

Answer 1

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