Question

我想知道是否有一些方法可以在一个div中查找所有html元素并以某种方式计算它们？在这个例子中，我试图获取所有元素以及我点击的元素中有多少元素：

var divs = ($(e.target).find('div')).length;
var spans = ($(e.target).find('span')).length;

等每一个人都有？

更新：我不知道如何用文字更好地解释它：

<div id="someDiv">
<span></span><span></span><span></span><span></span>
<p></p>
<header></header><header></header>
</div>

我是否需要逐个计算它们，或者是获得所有次数的方式：

span-4
p-1
header-2

Answer 1

假设您想要计算每种类型的元素，请使用tagName作为键

创建一个计数器对象

＆＃13;

$('#someDiv').click(function() {
  var counts = {}
  $(this).find('*').each(function() {
    var tag = this.tagName.toLowerCase();
    counts[tag] = counts[tag] || 0;
    counts[tag] ++;
  });
  console.log('Header count=', counts.header);
  console.log(counts);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someDiv">Click me
  <span></span><span></span><span></span><span></span>
  <p></p>
  <header></header>
  <header></header>
</div>

＆＃13;

Answer 2

您可以使用this和length，如：

$('*', this).length;

希望这有帮助。

$('div').on('click', function(){
    console.log( 'I HAVE '+ $('*', this).length + ' CHILDS' );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>I'm DIV 1 (CLICK ME)
  <div>Child 1</div>
  <span>Child 2</span>
  <div>Child 3</div>
</div>
<br>
<div>I'm DIV 2 (CLICK ME)
  <div>Child 1</div>
  <span>Child 2</span>
  <p>Child 3</p>
  <div>Child 4</div>
  <span>Child 5</span>
</div>
<br><br><br>

要计算您可以使用的所有代码each()：

$('div').on('click', function(){
  var _this = $(this);
  var cbnames = [];
  
  _this.children().each(function() {
    if (!~$.inArray(this.tagName, cbnames)) cbnames.push(this.tagName);
  });

  $.each(cbnames, function(i) {
    console.log(cbnames[i] + ' = ' + $(cbnames[i], _this).length);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>I'm DIV 1 (CLICK ME)
  <div>Child 1</div>
  <span>Child 2</span>
  <div>Child 3</div>
</div>
<br>
<div>I'm DIV 2 (CLICK ME)
  <div>Child 1</div>
  <span>Child 2</span>
  <p>Child 3</p>
  <div>Child 4</div>
  <span>Child 5</span>
</div>
<br><br><br>

Answer 3

您可以使用*和length来计算容器内的所有元素：

＆＃13;

var num = $("#container *").length;
console.log(num);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <span>1</span>
  <span>2</span>
  <div>3</div>
  <p>4</p>
</div>

＆＃13;

Answer 4

这是一个解决方案，它遍历所有元素并对它们进行计数（按标记名称分组）。

＆＃13;

var elements = {};
$('#someDiv').find('*').each(function() {
  var tagName = $(this).prop("tagName");
  if(!elements[tagName]) {
    elements[tagName] = 0;
  }
  elements[tagName]++;
});

console.log(elements);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someDiv">
  <span></span>
  <span>
    <span></span>
    <br></br>
    <test></test>
  </span>
  <span></span>
  <p></p>
  <br>
  <header></header>
</div>

＆＃13;

Answer 5

当然，您可以使用$（＆＃39;＃someId＆＃39;）。find（＆＃39; *＆＃39;）获取元素列表，然后迭代结果以获取数据

找到div中的所有html元素

5 个答案: