时间戳

首页 > 解决方案 > 如何获取每个匹配元素的特定子元素的数量

javascript - 如何获取每个匹配元素的特定子元素的数量

问题描述

如何获取每个匹配的父元素的匹配子元素的数量？HTML：

<div class="parent">
   Today I've eaten <mark>potatoes</mark>
</div>
<div class="parent"> 
   Yesterday I <mark>jumped</mark> and <mark>educated</mark> myself.
</div>

JS（jQuery）：

var context = $(".parent");
var amountOfMarksInside = context.each().has("mark").children("mark").length;

这个想法是在遍历“父”类的所有父级时获取特定父级内的标记数。我该怎么做？JS 和 jQuery 解决方案都受到赞赏。

标签： javascriptjquery

解决方案

要获取特定的父元素，您需要为其附加一个事件处理程序，以便获得可用于选择子mark元素的引用。在下面的示例中，我使用了click，但任何事件都可以。

$('.parent').on('click', e => {
  let numMarks = $(e.currentTarget).children('mark').length;
  console.log(numMarks);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  Today I've eaten <mark>potatoes</mark>
</div>
<div class="parent">
  Yesterday I <mark>jumped</mark> and <mark>educated</mark> myself.
</div>

或者，如果您想获取所有.parent元素的计数，您可以使用循环。map()隐含地这样做：

let numMarks = $('.parent').map((i, el) => $(el).children('mark').length).get();
console.log(numMarks);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  Today I've eaten <mark>potatoes</mark>
</div>
<div class="parent">
  Yesterday I <mark>jumped</mark> and <mark>educated</mark> myself.
</div>

推荐阅读