dynamic .length jquery function

Question

I have an unordered list with sub menus.

I have an unordered list and i want to print the number of child list items each list item contains , however, the function I wrote only returns 0.

If I replace $(this) with a class or ID then it works fine, however, it then prints the same number for every list item, and I need it to be dynamic, returning the .length or .size() of each individual list item.

Can you please guide me in the right direction? :)

/*atomic mass counter*/
$(document).ready(function(mass){

var atomic = $(this).parent('li').length;

$('.atom').html(atomic);

});

the class .atom is a child of each list item so the list looks something like this:

<ul>
  <li>
    <div class='atom'></div>
    <ul>
      <li><div class='atom'></div></li>
      <li><div class='atom'></div></li>
    </ul>
  </li>
  <li><div class='atom'></div></li>
  <li><div class='atom'></div></li>
  <li><div class='atom'></div></li>
</ul>

Here's a JSfiddle: https://jsfiddle.net/6gzau45r/1/

what are the expected results? Most in example have no sub menu. Not clear what you are wanting to measure — charlietfl
– charlietfl, Commented Mar 31, 2015 at 17:22

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

This answer uses jQuery's .each() method to iterate all li elements and uses .find() method to count how many elements (and child elements) with class .atom each li has.

/*atomic mass counter*/
$(document).ready(function (mass) {

    $("li").each(function () {

        var atomic = $(this).find('.atom').length;

        $(this).find('.atom').first().html(atomic);

    });

});

Fiddle

The atomic count is set to the first .atom element of each li.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 31, 2015 at 17:33

jyrkim

2,8791 gold badge26 silver badges35 bronze badges

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

Comments

nanndoj · Accepted Answer · 2015-03-31 17:32:01Z

0

You have to look the descendents by using .children(). Your solution may look similar to:

$(document).ready(function(mass){
    // For each atom div
    $('.atom').each(function() {
        // Calculates the children li
        $(this).html($(this).parent().children('ul').children('li').size());
    });    
});

Here is a FIDDLE:

https://jsfiddle.net/6gzau45r/6/

edited Mar 31, 2015 at 17:32

answered Mar 31, 2015 at 17:26

nanndoj

6,7907 gold badges33 silver badges43 bronze badges

Collectives™ on Stack Overflow

dynamic .length jquery function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related