Wie wählt man ein einzelnes untergeordnetes Element mit jQuery?

Verwenden von jQuery Wie wähle ich ein einzelnes untergeordnetes Element aus? Ich habe an der Verfahrgeschwindigkeit API geschaut und weiß, dass ich alle die unmittelbaren Kinder img Elemente wie folgt auswählen:Wie wählt man ein einzelnes untergeordnetes Element mit jQuery?

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

Und wählen Sie das erste Kind img Element ich einen Index wie diese verwenden:

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

Aber ich denke, ich irgendwie überrascht bin ich dies nicht tun können:

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

Oder haben habe ich etwas verpasst?

Quelle

2009-09-24 Jonathon Watney

Nein. Jede jQuery-Funktion gibt ein jQuery-Objekt zurück, und so funktioniert es. Dies ist ein entscheidender Teil von jQuerys Magie.

Wenn Sie das darunter liegende Element zugreifen möchten, haben Sie drei Möglichkeiten ...

Verwenden Sie jQuery nicht
Verwenden [0] es

Extend jQuery verweisen zu tun, was Sie wollen. ..

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

Quelle

2009-09-24 21:02:29

Ah ha! Das war's. Ich erwartete das Element img (versucht, seine "src" -Eigenschaft zu verweisen) anstelle des jQuery-Objekts. Jetzt benutze ich einfach 'attr()', um die Eigenschaft 'src' zu erhalten. –

Danke für 3) auch. Ich könnte darüber nachdenken. :) –

Nein. Wenn ich zum Beispiel 'find (" div ") [0] verwende, werde ich' div' nicht als jQuery-Objekt erhalten. Ich werde "div" als HTMLElement bekommen. Um 'div' als jQuery-Objekt zu erhalten, muss man' .eq (0) 'verwenden, wie Greg unten sagte. – Green

Ich denke, was Sie tun möchten, ist dies:

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

das Sie das erste Element img ein jQuery-Objekt geben enthält, während

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

finden Sie das img-Element geben sich.

Quelle

2009-09-24 20:57:02 Greg

Beachten Sie, dass Sie mit find wie in der ersten Antwort alle untergeordneten Elemente erhalten, während child nur direkte Kinder liefert. – Greg

Vielleicht auf diese Weise?

$('img', this)[0]

Quelle

2009-09-24 20:58:50 Anatoliy

Dies wird nicht unbedingt das direkte Kind auswählen und genauso wie die akzeptierte Antwort das Element zurückgeben, nicht das jQuery-Objekt. – Septagram

<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>

Quelle

2017-08-23 14:53:21

$ (function() { $ ('a') klicken (function() { $ (this) .parent() Kinder() slideToggle()..‘DataContentSectionMessages.;. }); }) ; Diese Abfrage hilft beim Abrufen des untergeordneten Elements eines übergeordneten Elements –

Wie wählt man ein einzelnes untergeordnetes Element mit jQuery?

Antwort

Verwandte Themen