2009-09-24 18 views
50

jQuery का उपयोग करके मैं एक बाल तत्व का चयन कैसे करूं? मैं traversing एपीआई को देखा और पता है कि मैं सब तत्काल बच्चों img तत्वों इस तरह का चयन कर सकते है:jQuery का उपयोग कर एक एकल तत्व तत्व का चयन कैसे करें?

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

और पहले बच्चे img तत्व मैं इस तरह एक सबस्क्रिप्ट इस्तेमाल कर सकते हैं का चयन करने के:

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

लेकिन मुझे लगता है मैं एक तरह से हैरान मैं ऐसा नहीं कर सकते कर रहा हूँ:

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

या मैं कुछ छूट गया है?

उत्तर

32

नहीं। प्रत्येक jQuery फ़ंक्शन एक jQuery ऑब्जेक्ट देता है, और इसी तरह यह काम करता है। यह jQuery के जादू का एक महत्वपूर्ण हिस्सा है।

आप अंतर्निहित तत्व उपयोग करना चाहते हैं, तो आप तीन विकल्प ...

  1. jQuery
  2. उपयोग [0] का प्रयोग न करें संदर्भ के लिए यह
  3. बढ़ाएँ jQuery आप क्या चाहते हैं क्या करना है। ..

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

आह हे! वह यह था। मैं आईएमजी तत्व की अपेक्षा कर रहा था (jQuery ऑब्जेक्ट की बजाय इसकी 'src' प्रॉपर्टी को संदर्भित करने का प्रयास कर रहा था। अब मैं 'src' प्रॉपर्टी पर जाने के लिए 'attr()' का उपयोग करूंगा। –

+0

3 के लिए धन्यवाद) भी। मैं ऐसा करने पर विचार कर सकता हूं। :) –

+6

नहीं। अगर मैं उदाहरण के लिए उपयोग करता हूं 'ढूंढें ("div") [0]' मुझे jQuery ऑब्जेक्ट के रूप में 'div' नहीं मिलेगा। मुझे 'div' को HTMLElement के रूप में मिलेगा। ग्रेग ऑब्जेक्ट के रूप में 'div' प्राप्त करने के लिए, ग्रेग ने नीचे कहा था, '.eq (0) 'का उपयोग करना होगा। – Green

80

मुझे लगता है कि आप क्या करना चाहते हैं यह है:,

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

इस आप पहली बार img तत्व युक्त एक jQuery वस्तु दे देंगे जबकि

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

आप img तत्व ही दे देंगे।

+1

ध्यान दें कि पहले उत्तर में ढूंढने का उपयोग करके आप सभी वंशज तत्व देंगे, जबकि बच्चा आपको केवल प्रत्यक्ष बच्चों को देगा। – Greg

3

शायद इस तरह से?

$('img', this)[0] 
+0

यह आवश्यक रूप से प्रत्यक्ष बच्चे का चयन नहीं करेगा और, स्वीकृत उत्तर के रूप में, यह तत्व को वापस करेगा, न कि jQuery ऑब्जेक्ट। – Septagram

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

$ (फ़ंक्शन() { $ ('a')। क्लिक करें (फ़ंक्शन() { $ (यह)। माता-पिता()। बच्चे ('डेटाकंटेंटसेक्शन मैसेज')। स्लाइड टॉगल(); }); }) ; यह क्वेरी माता-पिता के बच्चे की वस्तु प्राप्त करने में मदद करेगी –

संबंधित मुद्दे