CODEWITHSUNDEEP
javascriptjqueryhtml
aldrin27
aldrin27

Reputation: 3407

How to get the count of subchild inside the parent div in javascript or in Jquery?

I don't know how to count the div's of subchildren inside the parent div maybe someone can help me with this. I'm not that good in javascript or in Jquery.

Here's my code:

$(function () {
    var parent = document.getElementById('parent').children;
    var cnt = 0;
    if (parent) {
        var match = 'child';
        for (var i = 0; i < parent.length; i++) {
            var temp = parent[i].getAttribute('id');
            if (temp.indexOf(match) == 0) {
                cnt++;
            }
        }
    }
    console.log(cnt);
});

FIDDLE

Upvotes: 4

Views: 1407

Answers (5)

Tushar
Tushar

Reputation: 87203

You can use attribute-value selector

[id^=subchild] will select all the elements whose id value starts with(^) child.

Attribute value starts with selector.

Selects elements that have the specified attribute with a value beginning exactly with a given string.

Demo

$(function() {
  var subchildrenLen = $('#parent [id^=subchild]').length;
  $('body').append('No of children = ' + subchildrenLen);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="parent">
  <div id="child1">
    <div id="subchild1"></div>
  </div>
  <div id="child2">
    <div id="subchild2"></div>
  </div>
  <div id="child3">
    <div id="subchild3"></div>
  </div>
</div>

You can also use querySelectorAll with the same selector if you don't want to use jQuery.

var subchildrens = document.querySelectorAll('#parent [id^=subchild]').length;

If you want all the descendents count

var allChildrens = document.querySelectorAll('#parent div').length

Upvotes: 4

Amit
Amit

Reputation: 46341

You don't need jQuery at all here, simply use querySelectorAll and examine the length of the returned NodeList

console.log(document.querySelectorAll('#parent>[id^=child]').length)
<div id="parent">
    <div id="child1">
        <div id="subchild1"></div>
    </div>
    <div id="child2">
        <div id="subchild2"></div>
    </div>
    <div id="child3">
        <div id="subchild3"></div>
    </div>
</div>

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115242

Since subchild is child of div which is child of #parent, You can use selector #parent > div > div, > is direct child selector

$(function() {
  var len = $('#parent > div > div').length;
  alert(len);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="parent">
  <div id="child1">
    <div id="subchild1"></div>
  </div>
  <div id="child2">
    <div id="subchild2"></div>
  </div>
  <div id="child3">
    <div id="subchild3"></div>
  </div>
</div>

Using JavaScript you can use querySelectorAll()

var len = document.querySelectorAll('#parent > div > div').length;
alert(len);
<div id="parent">
  <div id="child1">
    <div id="subchild1"></div>
  </div>
  <div id="child2">
    <div id="subchild2"></div>
  </div>
  <div id="child3">
    <div id="subchild3"></div>
  </div>
</div>

Upvotes: 1

guradio
guradio

Reputation: 15555

alert($('#parent').find('div[id*="subchild"]').length)

DEMO

Attribute Contains Selector [name*=”value”]

DOCUMENTATION

Upvotes: 2

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

$(document).ready(function() {
      alert($('#parent [id^=subchild]').length)
});

DEMO PAGE

Upvotes: 1

Related Questions