如何获取父元素的子元素(仅第一个匹配[0]）

How to get children of parent element (only first match [0])

本文关键字：元素 第一个 何获取 获取      更新时间：2023-09-26

我有一个这样的代码：

<ul class="resource">
    <li class="location"></li>
    <li class="location"></li>
    <li class="location"></li>
</ul>
<ul class="resource">
    <li class="location"></li>
    <li class="location"></li>
    <li class="location"></li>
</ul>
<ul class="resource">
    <li class="location"></li>
    <li class="location"></li>
    <li class="location"></li>
</ul>

我想知道资源中有多少个位置（每个资源的位置数量总是相同的）。在这个例子中，答案是3。

我尝试了以下操作：

$(".resource > .location").length // Returns 9 (obvious)
$(".resource")[0].children(".location") // Uncaught TypeError: $(...).get(...).children is not a function

唯一有效的是：

$(".location").length / $(".resource").length // I won't use this one
$($(".resource")[0]).children(".location") // I'm using this one at this moment

它看起来很脏。如果我没有错的话，这就是："从DOM获取所有资源，只给我第一个，从DOM获取第一个资源"。这个页面有成千上万的资源，所以我正在尽可能地优化代码。

我可以在一个"DOM的调用"中完成吗？

提前感谢

您可以使用:first-child选择器

$('.resource:first-child .location');

您可以使用eq()伪选择器，如下所示。

$('resource:eq(0) .location').length;

或类似:first的以下内容。

$('resource:first .location').length;

您可以使用Vanilla JS:

document.querySelectorAll('.resource:first-child .location').length;

这也应该可以正常工作：

 $('.resource:first > .location').length;

或者：

$('.resource').first().children('.location').length;


alert( $('.resource:first > .location').length );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="resource">
    <li class="location"></li>
    <li class="location"></li>
    <li class="location"></li>
</ul>
<ul class="resource">
    <li class="location"></li>
    <li class="location"></li>
    <li class="location"></li>
</ul>
<ul class="resource">
    <li class="location"></li>
    <li class="location"></li>
    <li class="location"></li>
</ul>

相关文章：