Question

我有这样的代码：

<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

看起来很脏。如果我没错，那就是：＆＃34;从DOM中获取所有资源，只给我第一个资源，从DOM中获取第一个资源＆＃34;。该页面有数千个资源，因此我尝试尽可能地优化代码。

我可以在一个＆＃34; DOM的电话＆＃34;？

中完成

提前致谢

Answer 1

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

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

Answer 2

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

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

或:first如下。

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

Answer 3

您可以使用Vanilla JS：

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

Answer 4

这也应该可以正常工作：

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

或者：

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何获取父元素的子元素（只有第一个匹配[0]）

4 个答案: