How do I count html elements whose class is the same using jquery or javascript, but inside a particular <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.

[...document.querySelector('ul.elements')].map(el => el.querySelectorAll('.div').length) — Jared Smith
– Jared Smith, Commented Jun 28, 2018 at 14:52
loop through the ULs using .each() and then you can use .find() on each individual one to get how many .div elements there are within it. — ADyson
– ADyson, Commented Jun 28, 2018 at 14:53
@George that just tells you how many are in all the ULs with that class, in total, it does not give you a series of numbers which reveal the number of elements inside each separate UL — ADyson
– ADyson, Commented Jun 28, 2018 at 14:54

Amit Kumar · Accepted Answer · 2018-06-28 16:48:17Z

1

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

answered Jun 28, 2018 at 16:48

Amit Kumar

6604 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rogerio Brito Soares Over a year ago

Ok, your code works, but it still can't solve my problem. On the browser console I can see that it shows the number of list items with the class (.div) separately, but the problem is inside the if statement. Maybe, I have to change something in there, probably and specifically in the span tag. I need to specify that I want the text "Show/hide replies" to show in the span next or inside the "ul" element that contains number of "li.div" greater than zero. How do I do this? Because the text is still showing on both the spans even if only the first ul contains "li.div" and the second one doesn't.

Rogerio Brito Soares Over a year ago

Inspired on your code, that's what I've done:

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

Amit Kumar Over a year ago

Use jquery prev() and next() function to get the previous or next span element, respective to ul element.

Rogerio Brito Soares Over a year ago

I tried to follow your suggestion, but even so it's not working. I also updated my question where I added some notes at the bottom of it.

Amit Kumar Over a year ago

Inside the if statement, $(ulElement).find("span.text").text("show/hide")... I would recommend you to study atleast jQuery selectors before proceeding further with whatever you are trying to do.

|

Collectives™ on Stack Overflow

How do I count html elements whose class is the same using jquery or javascript, but inside a particular <ul>

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related