jQuery第一个节点选择器[重复]

Question

我有一个包装元素，其中包含具有唯一性的子元素。 如何不用遍历就得到an元素？

例如。

<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

如果你只想要第一个元素，你可以使用 children 并引用第一个元素

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

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

$( "#wrapper:first-child" )