如何使用jQuery選擇單個子元素？

使用jQuery如何選擇單個子元素？我看了看穿越API，知道我可以選擇所有的直接子img內容是這樣的：如何使用jQuery選擇單個子元素？

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

並選擇第一個孩子img元素我可以用一個標這樣的：

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

但我想我有點驚訝，我不能這樣做：

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

還是我錯過了什麼？

來源

2009-09-24 Jonathon Watney

不是。每個jQuery函數都返回一個jQuery對象，這就是它的工作原理。這是jQuery魔法的關鍵部分。

如果你想訪問底層的元素，你有三種選擇...

不要使用jQuery
使用[0]引用它

擴展了jQuery做你想做的。 ..

$.fn.child = function(s) { 
    return $(this).children(s)[0]; 
}

來源

2009-09-24 21:02:29

啊哈！就是這樣。我期待着img元素（試圖引用其'src'屬性）而不是jQuery對象。現在我只使用'attr（）'來獲取'src'屬性。 – 2009-09-24 21:11:51

感謝3）以及。我可能會考慮這樣做。 :) – 2009-09-24 21:12:32

編號如果我使用例如'find（「div」）[0]'我不會將'div'作爲jQuery對象。我將'div'作爲HTMLElement。爲了讓'div'成爲jQuery對象，必須使用'.eq（0）'，如Greg所述。（）。（function。（）{（'a'）。click（function（）{this.parent（）。children（'。dataContentSectionMessages'）。slideToggle（）; }）; }）（ – Green 2013-07-30 03:27:36

我想你想要做的是這樣的：

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

這會給你包含第一img元素一個jQuery對象，而

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

會給你img元素本身。

來源

2009-09-24 20:57:02 Greg

請注意，在第一個答案中使用find會給你所有的後代元素，而孩子只會給你直接的孩子。 – Greg 2009-09-24 20:59:06

也許用這種方式？

$('img', this)[0]

來源

2009-09-24 20:58:50 Anatoliy

這不一定會選擇直接的孩子，並且正如接受的答案一樣，這將返回元素，而不是jQuery對象。 – Septagram 2015-05-06 09:16:04

<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-23 14:53:21

） ;此查詢將有助於獲取父項的子項目 – 2017-08-23 14:53:51

如何使用jQuery選擇單個子元素？

回答

相關問題