logo标签列表

如何选择第一个子元素？

javascriptjquerychildren
38

如何使用 first child 选择器选中这些 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>
6个回答
52

在纯 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：

    语法 类型 示例
    .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元素集合中按索引获取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
22
$('div.alldivs :first-child');

或者直接引用该id：

$('#div1');

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

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

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

4
你的第一个选择器需要加上空格。否则它只会匹配 div.alldivs 的第一个子元素（如果有的话）。 - Samir Talwar
这将返回任何后代的每个第一个子元素，而不仅仅是此处的第一个div。 - Felix Kling
2
$('div.alldivs > div:first-child'); - Kevin Ennis
1
@kennis：那样做行不通。那会匹配任何作为第一个子元素的 div。你真正想要的是 div:first-of-type，但显然 jQuery 不支持它。（早该看到这个问题了，但在问题中错过了它。） - Samir Talwar
10

使用:first-child选择器。

在你的示例中...

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

这也将匹配符合选择条件的任何第一个子代。

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

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

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

$('div.alldivs > div:first-child')
2
在这里使用子选择器 > 可能会更好。或者只是：$('div.alldivs').children().first(); 或类似的东西。 - Felix Kling
2

如果你需要找到第一个子元素的文本，那么这是最简单的解决方案。

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

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

这里有一些例子：

当您想要为第一个div添加类时

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

当你想要更改时，删除 "onediv" 类并仅添加到第一个子元素。
   $('.alldivs div').removeClass('onediv').first().addClass('onediv');
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接