gpt4 book ai didi

javascript - 如何选择第一个 child ?

转载 作者:IT王子 更新时间:2023-10-29 03:14:23 25 4
gpt4 key购买 nike

如何使用第一个子选择器选择这些 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>

最佳答案

在普通的 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 获取第一个 child

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

选择器方法的其他示例针对 UL 中的first LI >:

<表类="s-表"><头>语法类型例子<正文> .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] 通过 index 从 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

关于javascript - 如何选择第一个 child ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5852452/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com