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

admin管理员组

文章数量:1356304

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

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

• javascript
• jquery
• html

Share Improve this question Follow edited Feb 29, 2016 at 0:54 Sevle 3,11922 gold badges2121 silver badges3131 bronze badges asked Sep 29, 2015 at 5:30 aldrin27aldrin27 3,41744 gold badges3030 silver badges4444 bronze badges 4

• You're not using jQuery at all. Why ask about it, and why "introduce it" into your code base if its not needed? – Amit Commented Sep 29, 2015 at 5:35
• Yes but i know there's a code that will get my desired output using jquery. – aldrin27 Commented Sep 29, 2015 at 5:36
• you can do it without jQuery in a very simple manner (one liner even), see my answer. I don't believe in going to bloated libraries for simple tasks. – Amit Commented Sep 29, 2015 at 5:43
• Please edit your question, include the relevant HTML, and explain exactly what you're trying to count, cause your current question is not what you're asking for in ments to answers. – Amit Commented Sep 29, 2015 at 6:05

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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./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

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

DEMO

Attribute Contains Selector [name*=”value”]

DOCUMENTATION

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>

you can try this one:

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

DEMO PAGE

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./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>

本文标签： How to get the count of subchild inside the parent div in javascript or in JqueryStack Overflow