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

Question

如何获取每个匹配的父元素的匹配子元素的数量？ 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 解决方案都受到赞赏。

Answer 1

要获得特定的父级，您需要将一个事件处理程序附加到它，以便获得可用于选择子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>

Answer 2

您可以使用 vanilla JS 实现这一点，不需要 Jquery。 只需像这样获取父类中的所有标记标签。

 console.log(document.querySelectorAll('.parent mark').length)

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