如何獲取每個匹配元素的特定子元素的數量

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>