如何使用jQuery选择单个子元素？

Question

Using jQuery how do I select a single child element?使用 jQuery 如何选择单个子元素？ I've looked at the Traversing API and know I can select all the immediate children img elements like this:我看过 Traversing API 并且知道我可以像这样选择所有直接子元素img元素：

$(this).children('img');

And to select the first child img element I could use a subscript like this:要选择第一个子img元素，我可以使用这样的下标：

$(this).children('img')[0];

But I guess I'm kind of surprised I can't do this:但我想我有点惊讶我不能这样做：

$(this).child('img'); // no subscript, returns single element

Or have I missed something?或者我错过了什么？

Answer 1

I think what you want to do is this:我想你想做的是这样的：

$(this).children('img').eq(0);

this will give you a jquery object containing the first img element, whereas这将为您提供一个包含第一个 img 元素的 jquery 对象，而

$(this).children('img')[0];

will give you the img element itself.会给你 img 元素本身。

Answer 2

No. Every jQuery function returns a jQuery object, and that is how it works.不是。每个 jQuery 函数都返回一个 jQuery 对象，这就是它的工作原理。 This is a crucial part of jQuery's magic.这是 jQuery 魔法的关键部分。

If you want to access the underlying element, you have three options...如果你想访问底层元素，你有三个选择......

Do not use jQuery不要使用 jQuery
Use [0] to reference it使用[0]来引用它
Extend jQuery to do what you want...扩展 jQuery 来做你想做的事......
```
 $.fn.child = function(s) { return $(this).children(s)[0]; }
```

Answer 3

也许以这种方式？

$('img', this)[0]

Answer 4

Not jQuery , as the question asks for, but natively (ie, no libraries required) I think the better tool for the job is querySelector to get a single instance of a selector:不是问题所要求的jQuery ，而是本机（即不需要库）我认为更好的工作工具是querySelector来获取选择器的单个实例：

let el = document.querySelector('img');
console.log(el);

For all matching instances, use document.querySelectorAll() , or for those within another element you can chain as follows:对于所有匹配的实例，请使用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');

Note the above is equivalent to:注意上面的等价于：

let childrenEls = document.querySelector('.parentClassName').querySelectorAll('img');

Answer 5

You can target the first child element with just using CSS selector with jQuery:您可以仅使用带有 jQuery 的 CSS 选择器来定位第一个子元素：

$(this).children('img:nth-child(1)');

If you want to target the second child element just change 1 to 2:如果要定位第二个子元素，只需将 1 更改为 2：

$(this).children('img:nth-child(2)');

and so on..等等..

if you want to target more elements, you can use a for loop:如果要定位更多元素，可以使用 for 循环：

for (i = 1; i <= $(this).children().length; i++) {
    let childImg =  $(this).children("img:nth-child("+ i +")");
    // Do stuff...
}

Answer 6

<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选择单个子元素？

问题描述

6 个解决方案

解决方案1
106 2009-09-24 20:57:02

解决方案2
49 已采纳 2009-09-24 21:02:29

解决方案3
5 2009-09-24 20:58:50

解决方案4
1 2019-02-22 09:13:06

解决方案5
1 2020-11-20 23:22:36

解决方案6
0 2017-08-23 14:53:21

如何使用jQuery选择单个子元素？

问题描述

6 个解决方案

解决方案1 106 2009-09-24 20:57:02

解决方案2 49 已采纳 2009-09-24 21:02:29

解决方案3 5 2009-09-24 20:58:50

解决方案4 1 2019-02-22 09:13:06

解决方案5 1 2020-11-20 23:22:36

解决方案6 0 2017-08-23 14:53:21

解决方案1
106 2009-09-24 20:57:02

解决方案2
49 已采纳 2009-09-24 21:02:29

解决方案3
5 2009-09-24 20:58:50

解决方案4
1 2019-02-22 09:13:06

解决方案5
1 2020-11-20 23:22:36

解决方案6
0 2017-08-23 14:53:21