How to get subshild count inside parent div in javascript or in jQuery?

Question

I don’t know how to read divs of children inside parent div, maybe someone can help me. I'm not so good at javascript or jQuery.

Here is 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

Answer 1

You can use attribute value selector

[id^=subchild]selects all elements whose value idbegins with ( ^) child.

The attribute value begins with a selector.

Selects elements with the specified attribute with a value starting exactly with the 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>

Run codeHide result

---

querySelectorAll , jQuery.

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

,

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

Answer 2

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

DEMO

[name * = "value" ]

Answer 3

You don't need jQuery at all, just use querySelectorAlland 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>

Run codeHide result

Answer 4

you can try the following:

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

Demo page

Answer 5

Since it subchildis a child div, a child #parent, you can use a selector #parent > div > div, a direct selector for children >

$(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>

Run codeHide result

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>

Run codeHide result