CODEWITHSUNDEEP
jquerycountelement
Jay
Jay

Reputation: 782

Using jQuery, count the number of immediate div's under a parent

I have a situation like this - When a link is clicked (i.e.,Click1, Click2 etc), I want to get the count (number) of the immediate div's under "tracker". In this example, the number of div's under first "tracker" is 3 and under second tracker, it is 2. So, if I click on (say) Click2, it should alert 3. I am always getting 1.

Any help would be highly appreciated. Thanks in advance.

$(document).on("click", ".connect", function(ev) {
  console.log($(this).parents(".tracker > div.item").length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <div class="tracker">
    <div class="item"><a href="#" class="connect">Click1</a></div>
    <div class="item"><a href="#" class="connect">Click2</a></div>
    <div class="item">
      <div class="sub_item"><a href="#" class="connect">Click3</a></div>
    </div>
  </div>
  <div class="tracker">
    <div class="item"><a href="#" class="connect">Click4</a></div>
    <div class="item"><a href="#" class="connect">Click5</a></div>
  </div>
</div>

Upvotes: 1

Views: 33

Answers (1)

isherwood
isherwood

Reputation: 61114

You're using a selector for the parent that includes its child element. That won't get you the right parent. Select the correct ancestor first, then the children.

$(document).on("click", ".connect", function(ev) {
  console.log($(this).parents(".tracker").children('.item').length);

  setTimeout(function() {
    console.clear();
  }, 800);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <div class="tracker">
    <div class="item"><a href="#" class="connect">Click1</a></div>
    <div class="item"><a href="#" class="connect">Click2</a></div>
    <div class="item">
      <div class="sub_item"><a href="#" class="connect">Click3</a></div>
    </div>
  </div>
  <div class="tracker">
    <div class="item"><a href="#" class="connect">Click4</a></div>
    <div class="item"><a href="#" class="connect">Click5</a></div>
  </div>
</div>

Upvotes: 3

Related Questions