JQuery फ़ंक्शन द्वारा केवल प्रत्यक्ष बाल तत्व कैसे प्राप्त करें


89

मेरे पास इस तरह की एक तालिका संरचना है:

<table1>
  <tbody>
    <tr>
      <td></td>
        ...
      <td>
        <table2>
          <tbody>
            <tr>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
   </tbody>
  </table>

जावास्क्रिप्ट में, मैं एक चर राशि tblके मूल्य के साथ $(table1), और फिर मैं के सभी प्रत्यक्ष बच्चे तत्वों (tr) प्राप्त करना चाहते हैं <tbody>की table1। मेरा कोड है:

$('tr', tb1)

जाहिरा तौर पर यह <tr>तालिका 1 और तालिका 2 में सभी तत्वों को लौटाता है । मुझे लगता है कि मैं प्राप्त कर सकता हूं

$('tr', tb1).not(function(){return $(this).parent().parent()[0] != tb1;})

या इस तरह का तर्क।

मुझे पता है $('table1 > tbody > tr')कि सीधा बच्चा मिल सकता है tr। दुर्भाग्य से मैं इसका उपयोग नहीं कर सकता।

किसी को भी इस बारे में अच्छा विचार है?

धन्यवाद।

जवाबों:


178

आप उपयोग कर सकते हैं find():

tbl.find("> tbody > tr")


2
यह बहुत ही शानदार विचार है। $ ('> tbody> tr', tb1) भी मेरे लिए काम करता है। धन्यवाद।
जेसन ली

1
यह अद्भुत है, मुझे नहीं पता था कि आप इसके >सामने कुछ भी निर्दिष्ट किए बिना प्रत्यक्ष बच्चे चयनकर्ता ( ) का उपयोग कर सकते हैं । धन्यवाद।
रेशमकीट

3
ध्यान दें कि सीधे बच्चों के लिए जो केवल एक स्तर नीचे हैं आप बस 'बच्चों ([चयनकर्ता])' का उपयोग कर सकते हैं।
18

37
प्रत्यक्ष बच्चे = एक स्तर के नीचे के बच्चे , इसलिए api.jquery.com/children सही उत्तर है, नहीं मिल रहा है () - कि सभी को तत्व के सभी वंशज (चयनकर्ता द्वारा फ़िल्टर किया गया ...)
jave.web

4
आपको अपनी टिप्पणी को एक अलग उत्तर देना चाहिए jave.web जैसा कि आपका सही उत्तर है।
मरमिल्सी

23

जैसा कि @ jave.web ने टिप्पणियों में उल्लेख किया है

एक तत्व के प्रत्यक्ष बच्चों के माध्यम से खोज करने के लिए .children()। यह केवल प्रत्यक्ष बच्चों के माध्यम से खोज करेगा और किसी भी गहराई तक नहीं जाएगा। http://api.jquery.com/children/


5

यही कारण है कि किसी को घोंसले के शिकार के साथ सावधान रहना चाहिए। मुझे वास्तव में उम्मीद है कि आप उन्हें डेटा के लिए उपयोग करेंगे न कि पेज लेआउट के लिए।

एक और मुद्दा जो शायद आपके दिन को बर्बाद कर देगा नेस्टेड टेबल पर CSS चयनकर्ताओं का उपयोग कर रहा है ... आपके पास मूल रूप से एक ही मुद्दा है - आप आंतरिक तालिका के अंदर का चयन किए बिना बाहरी तालिका के TR तत्वों का चयन करने में असमर्थ हैं। (आप बच्चे के चयनकर्ता का उपयोग नहीं कर सकते क्योंकि यह IE6 में लागू नहीं है)

यह काम करना चाहिए:

$("#table1 > tbody > tr")

हालांकि, मेरा सुझाव है कि आप TBODY तत्व को हार्डकोड करें, क्योंकि आपको इसे बनाने के लिए ब्राउज़र पर भरोसा नहीं करना चाहिए।



0

यदि आपके पास दोनों तत्वों के आईडी हैं और आप कोड के नीचे प्रत्यक्ष तत्व का उपयोग करना चाहते हैं

$("#parent > #two")

यदि आप एक नेस्टेड खोज चाहते हैं तो आप खोज का उपयोग कर सकते हैं। इसे यहां विस्तार से समझाया गया है। https://handyopinion.com/jquery-selector-find-nested-child-elements/

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.