एन लेवल चिल्ड्रन के माध्यम से इटरेटिंग

Question

ऐसा कुछ साफ दिखता है जो "अंतर्निहित" हो सकता है लेकिन मुझे लगता है कि यह अभी भी पूछने लायक है।

मुझे एक समस्या है जहां इसे आसानी से तत्व के सभी बच्चों के माध्यम से हल करके हल किया जा सकता है। मैंने हाल ही में खोज की है कि मुझे उन मामलों के लिए खाते की आवश्यकता है जहां मुझे "1 स्तर" (सिर्फ एक बार कॉलिंग) (केवल एक बार कॉलिंग) की तुलना में एक स्तर या दो गहराई करने की आवश्यकता होगी। मैं वर्तमान में कर रहा हूं।

jQuery.each(divToLookAt.children(), function(index, element) 
    { 
     //do stuff 
    } 
    ); 

यही वह है जो मैं कर रहा हूं। दूसरी परत गहरी जाने के लिए, मैं प्रत्येक तत्व के लिए सामान कोड करने के बाद एक और पाश चलाता हूं।

jQuery.each(divToLookAt.children(), function(index, element) 
{ 
    //do stuff 
    jQuery.each(jQuery(element).children(), function(indexLevelTwo, elementLevelTwo) 
    { 
     //do stuff 
    } 
    ); 
} 
); 

यदि मैं अभी तक एक और स्तर गहरा जाना चाहता हूं, तो मुझे यह सब फिर से करना होगा।

यह स्पष्ट रूप से अच्छा नहीं है। मुझे एक "स्तर" चर घोषित करना अच्छा लगेगा और फिर यह सब ख्याल रखेगा। किसी के पास एक स्वच्छ कुशल jQueryish समाधान के लिए कोई विचार है?

धन्यवाद!

Answer 1

यह गहरा पकड़ स्तर के कारण एक शानदार सवाल है। Check out the fiddle।

इसे एक प्लगइन में कनवर्ट किया गया।

सक्रिय

$('#div').goDeep(3, function(deep){ // $.fn.goDeep(levels, callback) 
    // do stuff on `this` 
}); 

प्लगइन

$.fn.goDeep = function(levels, func){ 
    var iterateChildren = function(current, levelsDeep){ 
     func.call(current, levelsDeep); 

     if(levelsDeep > 0) 
      $.each(current.children(), function(index, element){ 
       iterateChildren($(element), levelsDeep-1); 
      }); 
    }; 

    return this.each(function(){ 
     iterateChildren($(this), levels); 
    }); 
}; 

Answer 2

var lvlFunc = function(elmt, depth) { 
    if(depth > 0) { 
     elmt.children().each(function(i, e){ 
      // do stuff on the way down 
      lvlFunc($(this), --depth); 
      // do stuff on the way out 
     }); 
     // do stuff 
    } 
}; 

lvlFunc(divToLookAt, 3); 

यकीन है कि आप अगर मामलों "सामान" आदेश में किया जाता है सही स्थान में अपने "सामान है" कोड डाल सुनिश्चित करें।

Answer 3

यह सवाल है भयानक :-)

हैं क्या आप जानते हैं अपने डोम भी विशाल नहीं है, तो आप सिर्फ सभी सन्तान खोजने के लिए और जो कि योग्य नहीं है बाहर फ़िल्टर कर सकते हैं:

var $parent = $('#parent'); 
var $childrenWithinRange = $parent.find('*').filter(function() { 
    return $(this).parents('#parent').length < yourMaxDepth; 
}); 

उसके बाद, jQuery उदाहरण "$ childrenWithinRange" होगा उस माता-पिता के सभी बच्चे नोड <div> जो कुछ अधिकतम गहराई के भीतर हैं। यदि आप वास्तव में उस गहराई को चाहते थे, तो आप "<" को "===" पर स्विच करेंगे। मैं कहीं से दूर हो सकता है।

Answer 4

तुम बस all-selector^(docs), child-selector^(docs) और इस तरह multiple-selector^(docs) साथ यह करने के लिए सक्षम होना चाहिए:

उदाहरण:http://jsfiddle.net/mDu9q/1/

$('#start > *,#start > * > *,#start > * > * > *').doSomething(); 

...या यदि आप केवल बच्चों 3 स्तरों गहरी लक्षित करना चाहता है, तो आप ऐसा कर सकते हैं:

उदाहरण:http://jsfiddle.net/mDu9q/2/

$('#start > * > * > *').doSomething(); 

इन चयनकर्ताओं के दोनों querySelectorAll के लिए मान्य हैं, जो बड़ा प्रदर्शन को बढ़ावा देने का मतलब है समर्थित ब्राउज़र में।

Answer 5

प्रश्न जैसा लगता है कि उत्तर XPATH हो सकता है। मैं अच्छी तरह से ब्राउज़र-समर्थन के बारे में सूचित नहीं कर रहा हूँ, लेकिन XPATH में आप केवल

/*/*/*/* 

• https://developer.mozilla.org/en/introduction_to_using_xpath_in_javascript (एफएफ, क्रोम, सफारी, ओपेरा में काम करता है)
• http://msdn.microsoft.com/en-us/library/aa335968%28v=vs.71%29.aspx की तरह एक पथ बनाने की जरूरत (अभी तक इसे आजमाया नहीं है)