How to find number of inside each div

Question

I have a large file of this form [similar div's throughout]. I want to be able to select a div, find the number of ul's in it and traverse through each of them to get value of each li in it.

<div class="experiment">
   <div class="experiment-number">5</div>
   <ul class="data-values">
         <li><div></div> 14</li>
         <li><div></div> 15</li> 
   </ul>
   <ul class="data-values">
        <li><div></div> 16</li>
   </ul> 
</div>

I have tried looping through all experiment divs, then select the uls, but it selects all the ul in the page, not only the ones under current div.

$('experiment ul').eq('$i');

Answer 1

Your HTML is currently incorrect, since you're simply starting new <div> and <ul> elements rather than closing the existing ones. Ignoring that because it's trivial to fix, we'll move on to the real issue.

You need to select all of the <div class="experiment"> elements, then iterate through them. To do that you can use the .each() function. It might look something like this:

var experiments = $('.experiment'); // all of them

experiments.each(function(i, val) { // will iterate over that list, one at a time
    var experiment = $(this); // this will be the specific div for this iteration
    console.log("Experiment: " + experiment.find('.experiment-number').text());
    // outputs the experiment number
    console.log("Experiment ULs: " + experiment.find('ul').length);
    // number of <ul> elements in this <div>
    var total = 0;
    experiment.find('ul.data-values li').each(function() {
        total += parseInt($(this).text(), 10);
    });
    console.log("Experiment total: " + total);
    // outputs the total of the <li> elements text values
});

Take a look at this jsFiddle demo.

Answer 2

First of all you need to work out the correct selector for each DIV.

The selector you want is:

".experiment"

Notice the . to denote a class selector.

This will allow you access to each DIV element. If you then want to loop though each of these, you can do so like this:

$(".experiment").each(function(){
   var div = $(this);

   var elementsInThisDiv = div.find("ul");
   //you now have a list of all UL elements in the current DIV only

   var numberOfElements = elementsInThisDiv.length;
   //you now have a count of UL elements belonging to this DIV only

   //you can loop the UL elements here
   $(elementsInThisDiv).each(function(){
       var ul = $(this);
       //do something with the UL element

       //like get the LI elements...
       var liElements = ul.find("li");
   });
});

---

IMPORTANT: There is also an error with your HTML, you need to close your <ul> elements correctly using </ul>

Answer 3

to get all the ul inside div.experiment

var ul = $('.experiment').find('ul');

and to get all li elements inside each ul found above

ul.each(function(list) {
 var li = $(list).find('li');
});

Answer 4

$('.experiment').each(function() {
    var cnt = $(this).children('ul').length;
    $(this).find('.experiment-number').text(cnt);
});