Cách chọn một phần tử con bằng cách sử dụng jQuery?

Sử dụng jQuery làm cách nào để chọn một phần tử con? Tôi đã nhìn vào Traversing API và biết tôi có thể chọn tất cả các trẻ em ngay lập tức img yếu tố như thế này:Cách chọn một phần tử con bằng cách sử dụng jQuery?

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

Và để lựa chọn đầu tiên phần tử con img tôi có thể sử dụng một subscript như thế này:

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

Nhưng tôi đoán tôi là loại ngạc nhiên tôi không thể làm điều này:

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

Hoặc tôi đã bỏ lỡ một cái gì đó?

Nguồn

2009-09-24 Jonathon Watney

Không. Mỗi hàm jQuery trả về đối tượng jQuery và cách hoạt động. Đây là một phần quan trọng trong phép thuật của jQuery.

Nếu bạn muốn truy cập các yếu tố cơ bản, bạn có ba tùy chọn ...

Không sử dụng jQuery
Sử dụng [0] để tham khảo nó

Mở rộng jQuery để làm những gì bạn muốn. ..

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

Nguồn

2009-09-24 21:02:29

Ah ha! Điều đó là vậy đó. Tôi đã mong đợi phần tử img (cố gắng tham chiếu thuộc tính 'src' của nó) thay vì đối tượng jQuery. Bây giờ tôi sẽ chỉ sử dụng 'attr()' để lấy thuộc tính 'src'. –

Cảm ơn 3). Tôi có thể xem xét việc đó. :) –

No. Nếu tôi sử dụng ví dụ 'find (" div ") [0]' Tôi sẽ không nhận 'div' làm đối tượng jQuery. Tôi sẽ nhận 'div' như HTMLElement. Để có được 'div' như đối tượng jQuery người ta phải sử dụng' .eq (0) ', như Greg đã nói bên dưới. – Green

Tôi nghĩ rằng những gì bạn muốn làm là thế này:

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

này sẽ cung cấp cho bạn một đối tượng jquery chứa các yếu tố img đầu tiên, trong khi

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

sẽ cung cấp cho bạn các yếu tố img riêng của mình.

Nguồn

2009-09-24 20:57:02 Greg

Lưu ý rằng việc sử dụng tìm kiếm như trong câu trả lời đầu tiên sẽ cung cấp cho bạn tất cả các phần tử con cháu, trong khi trẻ em sẽ chỉ cho bạn con trực tiếp. – Greg

Có thể theo cách này?

$('img', this)[0]

Nguồn

2009-09-24 20:58:50 Anatoliy

Điều này sẽ không nhất thiết phải chọn con trực tiếp và, giống như câu trả lời được chấp nhận, điều này sẽ trả về phần tử chứ không phải đối tượng jQuery. – 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>

Nguồn

2017-08-23 14:53:21

$ (function() { $ ('a'). Click (function() { $ (this) .parent(). Children ('. DataContentSectionMessages'). SlideToggle(); }); }) ; truy vấn này sẽ giúp lấy mục con của cha/mẹ –

Cách chọn một phần tử con bằng cách sử dụng jQuery?

Trả lời

Các vấn đề liên quan