问题描述
如何使用第一个子选择器选择这些 div 中的第一个 div(具有 id=div1
的那个)?
<div class="onediv";id="div1">1 这个</div><div class="onediv";id=div2">2<div class="onediv";id=div3">3
如何使用第一个子选择器选择这些 div 中的第一个 div(具有 id=div1
的那个)?
<div class="onediv";id="div1">1 这个</div><div class="onediv";id=div2">2<div class="onediv";id=div3">3
在普通的 JavaScript 中,您可以使用以下内容:
//单个document.querySelector(".onediv").classList.add("red");//多个(深度嵌套)document.querySelectorAll(".onediv:first-child").forEach(EL => EL.classList.add("red"));
或由父元素使用 Element.firstElementChild:
//单亲document.querySelector(".alldivs").firstElementChild.classList.add("red");//多个父节点document.querySelector(".alldivs").forEach(EL => EL.firstElementChild.classList.add("red"));
使用:$(".onediv").eq(0)
其他选择器和方法的例子,针对UL
firstLI
>:
语法 | 类型 | 示例 |
---|---|---|
.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;}选项[禁用] {字体大小:1.4em;颜色:蓝色;}
<option disabled>jQuery 示例:</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 示例:</option><option>document.querySelector("li").classList.add("red")</option><option>document.querySelectorAll("li:first-child").forEach(EL => EL.classList.add("red"))</option><option disabled>混合jQuery + JavaScript</option><option>$("li")[0].classList.add("red")</option></选择><ul><li>1</li>2<ul><li>2.1</li><li>2.2</li> <li>3</li><script src="https://code.jquery.com/jquery-3.6.0.js"></script>
您还可以使用 [i]
从 jQuery 元素集合中通过 index 获取 JS 元素,例如:
$("li")[0]
但是现在你有了原生的 JS Element
表示,你必须使用 JavaScript 方法,例如:
$("li")[0].classList.add("active");//添加类active"到 DOM 中的第一个 LI
或者你可以(不要 - 这是糟糕的设计)将它包装回一个 jQuery 对象
$( $("li")[0] ).addClass("active");//别!使用 .eq() 代替
How do I select the first div in these divs (the one with id=div1
) using first child selectors?
<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>
In plain JavaScript you would use something like:
// Single
document.querySelector(".onediv").classList.add("red");
// Multiple (deeply nested)
document.querySelectorAll(".onediv:first-child").forEach(EL => EL.classList.add("red"));
Or by Parent Element using Element.firstElementChild:
// Single Parent
document.querySelector(".alldivs").firstElementChild.classList.add("red");
// Multiple parents
document.querySelector(".alldivs").forEach(EL => EL.firstElementChild.classList.add("red"));
Use: $(".onediv").eq(0)
Other examples of selectors and methods targeting the first LI
inside an UL
:
.eq() | Method | $("li").eq(0) |
.first() | Method | $("li").first() |
:eq() | Selector | $("li:eq(0)") |
:first | Selector | $("li:first") |
:first-child | Selector | $("li:first-child") |
:lt() | Selector | $("li:lt(1)") |
:nth-child() | Selector | $("li:nth-child(1)") |
.slice() | Method | $("li").slice(0,1) |
There are some slight differences in how they operate regarding depth. Play with the below demo examples:
$("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>
you can also use [i]
to get the JS Element by index out of the jQuery elements collection like eg:
$("li")[0]
but now that you have the native JS Element
representation you have to use JavaScript methods eg:
$("li")[0].classList.add("active"); // Adds class "active" to the first LI in the DOM
or you can (don't - it's bad design) wrap it back into a jQuery object
$( $("li")[0] ).addClass("active"); // Don't! Use .eq() instead
这篇关于如何选择第一个孩子?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!