javascript - I'm grouping <li> elements by class, based on a solution, but need help understanding how it works -

एक unordered सूची की कल्पना करें:

  & lt; ul id = "something" & gt; & Lt; li वर्ग = "अभिभावक" & gt; अभिभावक & lt; / li & gt; & Lt; li वर्ग = "अभिभावक" & gt; अभिभावक & lt; / li & gt; & Lt; li वर्ग = "बाल" & gt; बाल & lt; / li & gt; & Lt; li वर्ग = "बाल" & gt; बाल & lt; / li & gt; & Lt; li वर्ग = "अभिभावक" & gt; अभिभावक & lt; / li & gt; & Lt; li वर्ग = "अभिभावक" & gt; अभिभावक & lt; / li & gt; & Lt; li वर्ग = "बाल" & gt; बाल & lt; / li & gt; & Lt; li वर्ग = "बाल" & gt; बाल & lt; / li & gt; & Lt; / ul & gt;  

मैं उपर्युक्त उदाहरण को इसमें बदलना चाहता हूं:

  & lt; ul id = "something" & gt; & Lt; li वर्ग = "अभिभावक" & gt; अभिभावक & lt; / li & gt; & Lt; li वर्ग = "अभिभावक" & gt; अभिभावक & lt; / li & gt; & LT; ul & gt; & Lt; li वर्ग = "बाल" & gt; बाल & lt; / li & gt; & Lt; li वर्ग = "बाल" & gt; बाल & lt; / li & gt; & Lt; / ul & gt; & Lt; li वर्ग = "अभिभावक" & gt; अभिभावक & lt; / li & gt; & Lt; li वर्ग = "अभिभावक" & gt; अभिभावक & lt; / li & gt; & LT; ul & gt; & Lt; li वर्ग = "बाल" & gt; बाल & lt; / li & gt; & Lt; li वर्ग = "बाल" & gt; बाल & lt; / li & gt; & Lt; / ul & gt; & Lt; / ul & gt;  

मैंने यहां पाया समाधान के आधार पर यह सफलतापूर्वक किया है:

  $ ('# कुछ')। बच्चों ('li.child: नहीं (Li.child + li.child) ')। प्रत्येक (फ़ंक्शन () {$ (यह) .nextUntil (' li.parent ') और स्वयं ()। लपेटो (' & lt; ul / & gt; ');}) ;  

अगर मैं इसका उपयोग नहीं करता हूं: नहीं (चयनकर्ता + चयनकर्ता) यह अजीब निरंतर एम्बेडिंग का कारण होता है ul> li> ul> li, आदि।

तो मूल रूप से मैं सिर्फ इसे स्पष्ट रूप से समझना चाहता हूं।

कार्य

यह कोड का वर्णन करता है कदम से कदम यह क्या करता है

यह पहला बच्चा चुनता है, और उनमें से प्रत्येक के लिए, अपने सभी भाइयों को इकट्ठा करके अगले माता पिता को स्वयं सहित, और उस संग्रह को ul में लपेटें।

या:

एनोटेड

$ ('li.child: नहीं (li.child + li.child)') < / /> हर पहले बच्चे को चुनता है (एक बच्चा जो किसी अन्य बच्चे से नहीं चल रहा है)।

उनमें से प्रत्येक के लिए ( .each (function () {), इसके सब इकट्ठा करें भावी बहन ( और स्वयं ) सहित अगले माता-पिता ( अगली युग में ('li.parent') ), और उस संग्रह को एक ul में लपेटें ( wrapAll ('& lt; ul & gt;') )।

नहीं (बच्चे + बच्चे) और अगले तक

इसलिए जादू नहीं (li.child + li.child) के संयोजन में है (जो प्रत्येक 'समूह' का पहला बच्चा चुनता है), और अगलीअंत तक विधि (जो चयन करता है अगले माता-पिता तक के बाद के सभी बच्चे)।

यदि आप नहीं हटाते हैं (.. .. .. ..) , आप सभी बच्चों को मिलेगा और उनके बाद के भाई बहन, जिसके परिणामस्वरूप ओवरलैपिंग ग्रुप होते हैं जो सभी लिपटे होते हैं। यह आपके HTML को गंभीरता से खराब करता है।

अन्य प्रासंगिक अंतर

आपके संस्करण और दान ए के संस्करण के बीच में कुछ छोटे अंतर हैं:

सबसे पहले, वह केवल एक ही वर्ग के साथ काम करता है, क्योंकि वह चयनकर्ता के रूप में नहीं (li.child) का उपयोग करता है, इसलिए मूल रूप से जो कोई भी बच्चा नहीं है वह माता-पिता को माना जाता है

दूसरे, वह इसे & lt; li & gt; & lt; ul & gt; के बजाय बस & lt; ul & gt; के रूप में लपेटता है। यह समझ में आता है, क्योंकि आइटम पहले से ही एक सूची में हैं माता-पिता सूची को वैध रखने के लिए बच्चों के संग्रह को एक li में लपेटा जाना चाहिए li के अलावा अन्य तत्व ul तत्वों के प्रत्यक्ष बच्चों के रूप में मान्य नहीं हैं आपका कोड माता-पिता ul के अंदर एक ul डालता है, तकनीकी रूप से HTML अवैध बना रहा है ब्राउज़र संभवत: निहित li को जोड़कर यह आपके लिए ठीक कर देगा।