javascript - 如何在 javascript 或 Jquery 中获取父 div 中子子项的数量？

Question

我不知道如何计算父 div 中子子项的 div，也许有人可以帮我解决这个问题。我不太擅长 javascript 或 Jquery。

这是我的代码:

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

您可以使用 attribute-value选择器

[id^=subchild] 将选择 id 值以 (^) 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>

---

如果您不想使用 jQuery，您也可以将 querySelectorAll 与相同的选择器一起使用。

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

如果你想把所有的后代都算上

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