如何使用jQuery選擇單個子元素？
[英]How to select a single child element using jQuery?
問題描述
使用 jQuery 如何選擇單個子元素？ 我看過 Traversing API 並且知道我可以像這樣選擇所有直接子元素img元素：
$(this).children('img');
要選擇第一個子img元素，我可以使用這樣的下標：
$(this).children('img')[0];
但我想我有點驚訝我不能這樣做：
$(this).child('img'); // no subscript, returns single element
或者我錯過了什么？
6 個解決方案
解決方案1
106 2009-09-24 20:57:02
我想你想做的是這樣的：
$(this).children('img').eq(0);
這將為您提供一個包含第一個 img 元素的 jquery 對象，而
$(this).children('img')[0];
會給你 img 元素本身。
解決方案2
49 已采納 2009-09-24 21:02:29
不是。每個 jQuery 函數都返回一個 jQuery 對象，這就是它的工作原理。 這是 jQuery 魔法的關鍵部分。
如果你想訪問底層元素，你有三個選擇......
- 不要使用 jQuery
- 使用
[0]來引用它 擴展 jQuery 來做你想做的事......
$.fn.child = function(s) { return $(this).children(s)[0]; }
解決方案3
5 2009-09-24 20:58:50
也許以這種方式？
$('img', this)[0]
解決方案4
1 2019-02-22 09:13:06
不是問題所要求的jQuery ，而是本機（即不需要庫）我認為更好的工作工具是querySelector來獲取選擇器的單個實例：
let el = document.querySelector('img');
console.log(el);
對於所有匹配的實例，請使用document.querySelectorAll() ，或者對於另一個元素中的那些，您可以按如下方式鏈接：
// Get some wrapper, with class="parentClassName"
let parentEl = document.querySelector('.parentClassName');
// Get all img tags within the parent element by parentEl variable
let childrenEls = parentEl.querySelectorAll('img');
注意上面的等價於：
let childrenEls = document.querySelector('.parentClassName').querySelectorAll('img');
解決方案5
1 2020-11-20 23:22:36
您可以僅使用帶有 jQuery 的 CSS 選擇器來定位第一個子元素：
$(this).children('img:nth-child(1)');
如果要定位第二個子元素，只需將 1 更改為 2：
$(this).children('img:nth-child(2)');
等等..
如果要定位更多元素，可以使用 for 循環：
for (i = 1; i <= $(this).children().length; i++) {
let childImg = $(this).children("img:nth-child("+ i +")");
// Do stuff...
}
解決方案6
0 2017-08-23 14:53:21
<html>
<title>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<body>
<!-- <asp:LinkButton ID="MoreInfoButton" runat="server" Text="<%#MoreInfo%>" > -->
<!-- </asp:LinkButton> -->
<!-- </asp:LinkButton> -->
<br />
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
<!-- repeater1 starts -->
<!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
<ul >
<li ><h6><strong>lorem</strong></h6></li>
<li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
<li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
<li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
<li ><h6><strong>Full Service Contracts</strong></h6></li>
<li ><h6><strong>Maintenance Contracts</strong></h6></li>
</ul>
<!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
<!-- repeater1 starts -->
<!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
<ul >
<li ><h6><strong>lorem</strong></h6></li>
<li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
<li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
<li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
<li ><h6><strong>Full Service Contracts</strong></h6></li>
<li ><h6><strong>Maintenance Contracts</strong></h6></li>
</ul>
<!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
<!-- repeater1 starts -->
<!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
<ul >
<li ><h6><strong>lorem</strong></h6></li>
<li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
<li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
<li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
<li ><h6><strong>Full Service Contracts</strong></h6></li>
<li ><h6><strong>Maintenance Contracts</strong></h6></li>
</ul>
<!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
<!-- repeater1 starts -->
<!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
<ul >
<li ><h6><strong>lorem</strong></h6></li>
<li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
<li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
<li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
<li ><h6><strong>Full Service Contracts</strong></h6></li>
<li ><h6><strong>Maintenance Contracts</strong></h6></li>
</ul>
<!-- repeater1 ends -->
</div>
</div>
</asp:Repeater>
</body>
<!-- Predefined JavaScript -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script>
$(function () {
$('a').click(function() {
$(this).parent().children('.dataContentSectionMessages').slideToggle();
});
});
</script>
</html>
如何在Jquery的父元素中選擇被單擊的子元素？
[英]How to select the clicked child element within a parent element in Jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.