jQuery में $(this) के चिल्ड्रन: आसान तरीका और टिप्स

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

jQuery में $(this) के चिल्ड्रन कैसे पाएं? आसान भाषा में समझें

\n\n

सोचिए: आप एक वेबसाइट पर इंटरैक्टिव टेबल बना रहे हैं। यूज़र जब किसी रो पर क्लिक करता है, तो आपको सिर्फ उसी रो की सेल्स को हाइलाइट करना है, बगल वाली को नहीं। या फिर आप ड्रॉपडाउन मेन्यू बना रहे हैं — हेडिंग पर क्लिक करने पर सिर्फ उसके सब-आइटम्स दिखने चाहिए। दोनों ही मामलों में सवाल उठता है: "मैं उस एलिमेंट के चिल्ड्रन कैसे पाऊं जिस पर मैंने अभी क्लिक किया है?"

\n\n

यह सवाल Stack Overflow पर बहुत पूछा जाता है। हजारों डेवलपर्स, नए से लेकर एक्सपर्ट तक, इसका जवाब ढूंढते हैं। और कोई आश्चर्य नहीं: $(this) और उसके चिल्ड्रन के साथ काम करना एक बेसिक स्किल है। आज हम इसे सही, आसान और बिना बग के करना सीखेंगे।

\n\n

$(this).children() हमेशा सही क्यों नहीं होता?

\n\n

सबसे आसान तरीका है children() मेथड। यह सिर्फ डायरेक्ट चिल्ड्रन (पहले लेवल के) को रिटर्न करता है। यह तो ठीक है, लेकिन नए डेवलपर्स अक्सर इससे जादू की उम्मीद करते हैं, जो यह नहीं कर सकता।

\n\n

// HTML:
// <div id="parent">
//   <span>डायरेक्ट चाइल्ड</span>
//   <div>
//     <span>अंदर का चाइल्ड (नहीं मिलेगा)</span>
//   </div>
// </div>

$('#parent').click(function() {
  // सिर्फ पहला <span> और <div> मिलेगा
  let directChildren = $(this).children();
  console.log(directChildren.length); // 2
});

याद रखें: children() अंदर के ब्लॉक्स में नहीं जाता। अगर आपको सभी लेवल के चिल्ड्रन चाहिए, तो find() का उपयोग करें।

तरीका नंबर 1: क्लासिक — $(this).children()

कब उपयोग करें: जब आपको सिर्फ उन्हीं एलिमेंट्स की ज़रूरत हो जो सीधे आपके ब्लॉक के अंदर हैं। जैसे, आपके पास एक <ul> लिस्ट है और आप उसके <li> को प्रोसेस करना चाहते हैं।

// उदाहरण: प्रोडक्ट कार्ड पर क्लिक
$('.product-card').on('click', function() {
  // कार्ड के सभी डायरेक्ट चिल्ड्रन पाएं
  let kids = $(this).children();
  
  // हर चाइल्ड पर कुछ करें
  kids.each(function(index) {
    $(this).addClass('highlighted');
  });
});

खास बात: आप कॉल में ही सेलेक्टर से फ़िल्टर कर सकते हैं:

// सिर्फ <div> एलिमेंट्स जो सीधे अंदर हैं
let divsOnly = $(this).children('div');

तरीका नंबर 2: गहरी खोज — $(this).find()

कब उपयोग करें: जब स्ट्रक्चर में कई लेवल हों और आपको सभी एलिमेंट्स चाहिए जिनमें कोई खास क्लास या टैग हो, चाहे वे कितने भी अंदर हों। जैसे, किसी आर्टिकल में सभी इमेजेज ढूंढना।

// न्यूज़ ब्लॉक पर क्लिक
$('.news-block').on('click', function() {
  // अंदर के सभी <img> टैग ढूंढें, चाहे वे कहीं भी हों
  let images = $(this).find('img');
  
  images.each(function() {
    // हर इमेज पर बॉर्डर डालें
    $(this).css('border', '2px solid red');
  });
});

children() से अंतर: find() पूरे DOM ट्री को अंदर तक खंगालता है। children() सिर्फ पहला लेवल। याद रखें: "चिल्ड्रन सिर्फ बच्चे हैं। Find पूरी वंशावली ढूंढता है।"

तरीका नंबर 3: नेटिव JavaScript — बिना jQuery के

क्या होगा अगर आप शुद्ध JS में लिख रहे हैं या लाइब्रेरी पर निर्भरता कम करना चाहते हैं? $(this) का नेटिव वर्जन है — इवेंट हैंडलर में this। इसके भी चिल्ड्रन होते हैं!

// शुद्ध JavaScript
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', function() {
    // डायरेक्ट चिल्ड्रन पाएं
    let children = this.children; // HTMLCollection
    
    // आसानी के लिए ऐरे में बदलें
    Array.from(children).forEach(child => {
      child.style.backgroundColor = 'yellow';
    });
    
    // या सेलेक्टर से सभी पोते-पड़पोते ढूंढें
    let allSpans = this.querySelectorAll('span');
  });
});