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

Question

I need to show the text inside "span" tags: "Show/hide replies" in my comments and subcomments system. So imagine a comment system to which you submit a comment and this comment shows on the page. And then another person reply to this comment and this reply also shows immediately afterwards.

What I want is that this text "Show/hide replies" does not show on the page, when I don't have any replies, that is, some logic like: If(no reply){do not show "Show/hide replies"}. Well, I created a jQuery code like this:

$(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{

    }
});

And this is the 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>

The classes must be named the same, because it's in reality part of a while loop (php), based on the database query (it queries how many replies there are in the database and shows these replies when its number is greater than zero, simple as that). The issue is that I want to count how many lists with class ".div" I have inside the "ul" tag (that means how many replies I have beneath the main comment).

If I activate the page inspector the browser console shows the total number of ".div" (4), but all I need is the number of ".div" inside the first ul and then inside the second one and so forth. If the number of ".div" is zero, then the text "Show/hide replies" does not show. It only shows when the number of ".div" inside a particular "ul" (2) is greater than zero.

But the console counts the total number (4). For that reason, if I have one reply (list with class ".div") in the first "ul", but none in the second "ul", even so, the console will count it, and as 1 is greater than zero, the text will appear above both the "ul", inside the tag "span". How do I avoid this?

Well, I've just edited my question and I've put my span tags inside the "ul", so that it becomes a child. According to @Amit Kumar's help, I rewrote my jQuery code and changed to this:

 $(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("");
        }
    });
});

The only problems are the spans. I want the text to show only in the span(s) which is(are) child(ren) of the element "ul" whose number of "li.div" is greater than zero. That means you can only show replies where there really are replies.

Answer 1

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