如何选择第一个孩子？

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>

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)

选择器的其他示例以及针对 UL 内的第一个 LI 的方法：

语法	类型	示例
.eq()	方法	$("li").eq(0)
.first()	方法	$("li").first()
:eq()	选择器	$("li:eq(0)")
:first	选择器	$("li:first")
:first-child	选择器	$("li:first-child")
:lt()	选择器	$("li:lt(1)")
:nth-child()	选择器	$("li:nth-child(1 )")
.slice()	方法	$("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 元素集合中按 index 获取 JS 元素，例如：

$("li")[0]

但现在您已经有了本机 JS Element< /code> 表示你必须使用 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

Answer 2

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

或者您可以直接引用 id：

$('#div1');

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

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

如果您没有有使用first-child，您可以使用:first 也建议，或 $('div.alldivs').children(0)。

Answer 3

使用 :first-child 选择器。

在您的示例中...

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

这也将匹配任何满足选择标准的第一个子后代。

虽然 :first 仅匹配单个元素，但 :first-child 选择器可以匹配多个元素：每个父元素一个。这相当于 :nth-child(1)。

对于第一个匹配的仅，请使用 :first 选择器。

或者，Felix Kling 建议使用 直接后代选择器仅获取直接子项...

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

Answer 4

如果您必须找到第一个子文本，那么这对您来说是最简单的解决方案

  $(".openReceipt").on("click", function() {
        console.log($(this).eq(0).find(".test").text());
    })

Answer 5

嗨，我们可以在 jQuery 中使用默认方法“first”，

这里有一些例子：

当你想为第一个 div 添加类时

  $('.alldivs div').first().addClass('active');

当你想更改删除“onediv”类并仅添加到第一个子元素时

   $('.alldivs div').removeClass('onediv').first().addClass('onediv');

Answer 6

正如@Roko 提到的，你可以通过多种方式做到这一点。

1.使用 jQuery 第一个子选择器 - SnoopCode

   $(document).ready(function(){
    $(".alldivs onediv:first-child").css("background-color","yellow");
        }

2. 使用jQuery eq 选择器 - SnoopCode

    $( "body" ).find( "onediv" ).eq(1).addClass( "red" );
   

3. 使用 jQuery Id 选择器 - SnoopCode

    $(文档).ready(function(){
        $("#div1").css("背景颜色：红色；");
      });