jQuery: दिखाई तत्वों की गिनती - दक्षता/गति समस्याओं

Question

मैं कुछ कोड है कि ठीक काम करता है, लेकिन यह बहुत ही धीमी हो रहा है:

HTML:

मैं एक कंटेनर है कि लगभग 50 ul तत्व शामिल है। प्रत्येक ul तत्व में h4 शीर्षक है जिसके बाद li तत्वों की एक श्रृंखला है। यदि कोई पंक्ति तत्व दिखाई नहीं दे रहा है तो फ़ंक्शन शीर्षक को छुपाता है।

जावास्क्रिप्ट/jQuery:

  function show_or_hide_headings() { 
       $('#container').children('ul').each(function (i) { 
        var $this = $(this), 
         $h4 = $this.children(':first'); 
        if ($this.children('li:visible').length) { 
         $h4.show(); 
        } else { 
         $h4.hide(); 
        } 
       }); 
      } 

यह काफी स्वीकार्य काम कर रहा था जब तक मैं li तत्वों की प्रकृति बदल दिया है। प्रत्येक li अब एक मिनी टेबल है जिसमें <table><tr><td>icon</td><td>text</td></tr></table> शामिल है। अब प्रक्रिया में 2 सेकंड लगते हैं, जबकि यह पहले आधे सेकेंड से भी कम समय में काम करता था। (तालिका आइकन के नीचे टेक्स्ट रैपिंग को रोकने के लिए है।)

मुझे कबूल है कि मैं समझ नहीं पा रहा हूं कि प्रत्येक li में अतिरिक्त तत्व जोड़ने के कारण डीओएम प्रोसेसिंग को इतना धीमा करना चाहिए क्योंकि मैंने .children का उपयोग किया है केवल एक डोम परत गहरी जाने के लिए चयनकर्ता।

मैं भी कोशिश की है:

   $('#container').find('h4').each(function (i) { 
        var $this = $(this); 
        if ($this.siblings('li:visible').length) { 
         $this.show(); 
        } else { 
         $this.hide(); 
        } 
       }); 

और अच्छा उपाय $('#container').children().children('h4')।

क्या उल्लेखनीय है, यह भी है कि जब li तत्व दिखाई देते हैं, तो यह कुछ दिखाई देने पर धीमा होता है। हालांकि, अब और अधिक लाइनें नहीं हैं, हालांकि, जब यह काफी तेज़ी से काम करती है (यानी, प्रत्येक पंक्ति में टेबल डालने से पहले)।

किसी भी सलाह बहुत सराहना, लेकिन मैं पोस्ट अधिक कोड से मेरे पास है :)

धन्यवाद का अनुरोध न करें।

Answer 1

मुझे संदेह है कि यह निर्धारित करना है कि कोई तत्व दिखाई दे रहा है या नहीं महंगा है। तत्वों को छिपाने या दिखाने के लिए कक्षा को जोड़ने और हटाने के बजाय विचार करें। फिर आप उन्हें कक्षा के आधार पर सीधे चुन सकते हैं, जिसे अधिकतर मेजबान getElementsByClassName या क्वेरी चयनकर्ता सभी विधि द्वारा समर्थित किया जाएगा।

Answer 2

कोशिश:

$('h4', '#container').css('display', 'none').filter(function() { 
    return $(this).siblings('li:visible').length; 
}).css('display', 'block'); 

लेकिन मैं RobG से सहमत हैं, you'r मार्कअप शायद सही नहीं है।