使用 jQuery 如何选择单个子元素？我查看了 Traversing API 并且知道我可以img像这样选择所有直接子元素：
$(this).children('img');
要选择第一个子img元素，我可以使用这样的下标：
$(this).children('img')[0];
但我想我有点惊讶我不能这样做：
$(this).child('img'); // no subscript, returns single element
还是我错过了什么？
问问题
194989 次
6 回答
114
我想你想要做的是：
$(this).children('img').eq(0);
这将为您提供一个包含第一个 img 元素的 jquery 对象，而
$(this).children('img')[0];
会给你 img 元素本身。
于 2009-09-24T20:57:02.787 回答
51
不，每个 jQuery 函数都返回一个 jQuery 对象，这就是它的工作原理。这是 jQuery 魔法的关键部分。
如果你想访问底层元素，你有三个选项......
- 不要使用 jQuery
- 用来
[0]引用它 扩展 jQuery 来做你想做的事……
$.fn.child = function(s) { return $(this).children(s)[0]; }
于 2009-09-24T21:02:29.687 回答
7
也许以这种方式？
$('img', this)[0]
于 2009-09-24T20:58:50.820 回答
2
您可以使用带有 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...
}
于 2020-11-20T23:22:36.460 回答
1
不是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');
于 2019-02-22T09:13:06.747 回答
0
<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>
于 2017-08-23T14:53:21.607 回答