Question

我有一个wrapper元素，其中包含具有唯一is的子元素。如何无需遍历就获得元素？

例如

<div id="wrapper">
    <div id="child1">content</div>
    <div id="child2">content</div>
    <div id="child3">content</div>
</div>

我当前正在使用jQuery.find，但仍然无法仅找到第一个元素。

$("#wrapper").find("#child1")......

上面的代码没有返回在find函数参数中指定的子元素，而是一个仅包含child1的数组。因此导致编写这样的代码。

$("#wrapper").find("#child1").each(function(){//do something...});

PS：我真的很想避免这样的事情，因为它效率低下

$("#wrapper #child1")

因为我已经拥有#wrapper元素，并且不想再次遍历整个DOM。

Answer 1

如果只需要第一个元素，则可以使用子元素并引用第一个元素

console.log($("#wrapper").children()[0])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="child1">content</div>
  <div id="child2">content</div>
  <div id="child3">content</div>
</div>

Answer 2

如果子元素具有唯一的ID，则可以通过ID直接访问该元素。

$("#child1").css('color', 'red');

或者如果您想使用jQuery，则可以使用jQuery的children方法。

$('#wrapper').children('#child1');

Answer 3

$("#wrapper div:first-child").css("color","green");

Answer 4

您可以使用：第一个孩子选择器

$( "#wrapper:first-child" )

jQuery第一个节点选择器

4 个答案: