如何选择第一个孩子？

Question

如何使用第一个子选择器选择这些 div 中的第一个 div（带有 id=div1 的那个）？

 <div class="alldivs">
   <div class="onediv" id="div1"> 1 This one </div>
   <div class="onediv" id="div2"> 2 </div>
   <div class="onediv" id="div3"> 3 </div>
</div>

原文由 sameold 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在普通的 JavaScript 中，你会使用类似这样的东西：

 // Single
document.querySelector(".onediv").classList.add("red");

// Multiple (deeply nested)
document.querySelectorAll(".onediv:first-child").forEach(EL => EL.classList.add("red"));

或者通过父元素使用 Element.firstElementChild ：

 // Single Parent
document.querySelector(".alldivs").firstElementChild.classList.add("red");

// Multiple parents
document.querySelector(".alldivs").forEach(EL => EL.firstElementChild.classList.add("red"));

jQuery 得到第一个孩子

使用： $(".onediv").eq(0)

针对第 一个 LI 在 UL 中的 选择器 和 方法 的其他示例：

句法类型例子.eq()方法$("li").eq(0)。第一的（）方法$("li").first():eq()选择器$("li:eq(0)")：第一的选择器$("li:first")：第一个孩子选择器$("li:first-child"):lt()选择器$("li:lt(1)")：第n个孩子（）选择器$("li:nth-child(1)")。片（）方法$("li").slice(0,1)

它们在深度方面的运作方式略有不同。玩下面的演示示例：

 $("select").on("change", function() {
  $("li").removeClass("red");
  new Function(`return (${this.value})`)();
}).trigger("change");

 .red {color: red;}
option[disabled] {font-size: 1.4em; color: blue;}

 <select>
  <option disabled>jQuery examples:</option>

  <option>$("li").eq(0).addClass("red")</option>
  <option>$("li:eq(0)").addClass("red")</option>
  <option>$("li").first().addClass("red")</option>
  <option>$("li:first").addClass("red")</option>
  <option>$("li:first-child").addClass("red")</option>
  <option>$("li:lt(1)").addClass("red")</option>
  <option>$("li:nth-child(1)").addClass("red")</option>
  <option>$("li").slice(0,1).addClass("red")</option>

  <option disabled>JavaScript examples:</option>

  <option>document.querySelector("li").classList.add("red")</option>
  <option>document.querySelectorAll("li:first-child").forEach(EL => EL.classList.add("red"))</option>

  <option disabled>Mixed jQuery + JavaScript</option>

  <option>$("li")[0].classList.add("red")</option>
</select>

<ul>
  <li>1</li>
  <li>2
    <ul>
      <li>2.1</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>3</li>
</ul>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

您还可以使用 [i] 从 jQuery 元素集合中按 索引 获取 JS 元素，例如：

 $("li")[0]

但现在您有了原生 JS Element 表示，您必须使用 JavaScript 方法，例如：

 $("li")[0].classList.add("active"); // Adds class "active" to the first LI in the DOM

或者你 _可以_（ 不要 - 这是糟糕的设计）将它包装回一个 jQuery 对象

$( $("li")[0] ).addClass("active"); // Don't! Use .eq() instead

原文由 Roko C. Buljan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

$('div.alldivs :first-child');

或者你可以直接引用id：

 $('#div1');

正如建议的那样，您最好使用子选择器：

 $('div.alldivs > div:first-child')

如果您 不必 使用 first-child ，您可以使用 :first 同样建议，或 $('div.alldivs').children(0) 。

原文由 Frederik Wordenskjold 发布，翻译遵循 CC BY-SA 3.0 许可协议