jquery nth-child

Question

के बाद सभी बच्चों का चयन करें मैं jquery के साथ काम कर रहा हूं और शो छुपा सूचियां बना रहा हूं, मुझे उल में 6 वें बच्चे का पालन करने वाली सभी बाल सूची वस्तुओं को छिपाने की ज़रूरत है। आम तौर पर मैं ऊंचाई सेट करके और फिर क्लिक के क्लिक पर ऊंचाई बदलकर ऐसा करूँगा, लेकिन इसके लिए काम करने के लिए मुझे अपने सीएसएस में overflow:hidden जोड़ने की आवश्यकता है, और यह एक विकल्प नहीं है।

मैं 7 वें बच्चे से अधिक सभी बाल सूची तत्व कैसे प्राप्त करूं?

कुछ की तरह,

$("ul li:6n").domeSomething()

Answer 1

मैं सभी बच्चे सूची तत्वों है कि 7 वीं बच्चे से अधिक हैं कैसे प्राप्त होगा?

का चयन करें तत्व सूचकांक = 7+

$("ul li:gt(6)").domeSomething() 

:gt selector

चयनकर्ता शून्य आधार सूचकांक उपयोग करता है:

ध्यान दें कि जब से जावास्क्रिप्ट सरणियों का उपयोग 0-आधारित अनुक्रमण, ये चयनकर्ता उस तथ्य को प्रतिबिंबित करते हैं। यही कारण है कि $ ('। Myclass: gt (1)') पहले के बजाए कक्षा के myclass के साथ दस्तावेज़ में दूसरे तत्व के बाद तत्वों का चयन करता है। इसके विपरीत,: एनएच-चाइल्ड (एन) सीएसएस विनिर्देश के अनुरूप 1-आधारित अनुक्रमण का उपयोग करता है।

Answer 2

इस प्रयास करें:

$('ul li:eq(6)').nextAll().domeSomething() 

Answer 3

उपयोग टुकड़ा एक सेट

.slice(start[,end]) 

http://api.jquery.com/slice/

उदाहरण कम करने के लिए (संपादित)

$("ul li").slice(6).doSomething(...) 

Answer 4

मैं अपने उत्तर केवल दो पिछले उत्तरों पर चर्चा करने के लिए लिखना चाहता था: the answerसे gdoron और the answerneu-rah से। अगर हम वोटिंग गिनती पर देखेंगे तो कोई देख सकता है कि सबसे पाठक डोरन के जवाब को बेहतर तरीके से ढूंढता है। मैं असहमत हूं और मैं स्पष्टीकरण की कोशिश क्यों करता हूं।

विवरण आप :gt() चयनकर्ता के प्रलेखन मिलेगा (: here देख "अतिरिक्त नोट्स"):

क्योंकि :gt(), सीएसएस विनिर्देशन का एक jQuery विस्तार और नहीं हिस्सा है का उपयोग कर :gt() नहीं ले जा सकते प्रश्नों देशी डीओएम querySelectorAll() विधि द्वारा प्रदत्त प्रदर्शन वृद्धि का लाभ। आधुनिक ब्राउज़रों में बेहतर प्रदर्शन के लिए, $("your-pure-css-selector").slice(index) का उपयोग करें।

आप (jQuery 1.7.2 के गैर कम से कम कोड के साथ) here या बेहतर here साथ कोड का परीक्षण कर सकते हैं। कोड केवल $("ul li:gt(6)").css("color", "red"); कथन का उपयोग करता है। सक्रिय बटन "अपवादों पर रोकें" के साथ क्रोम के डेवलपर टूल्स में डेमो शुरू करने पर आप समस्या को बेहतर ढंग से समझेंगे। (नहीं पहले एक यह हो जाएगा) आप निम्न अपवाद देखेंगे:

तो आप देख सकते है कि jQuery का वर्तमान क्रियान्वयन देशी वेब ब्राउज़र के querySelectorAll() उपयोग करने के लिए सबसे अच्छा प्राप्त करने की कोशिश प्रदर्शन। उसके बाद $.makeArray फ़ंक्शन को NodeList से jQuery wrapper बनाने के लिए उपयोग किया जाएगा। अपवाद the line के मामले में

return oldSizzle(query, context, extra, seed); 

तो तुम अगर आप querySelectorAll() द्वारा समर्थित चयनकर्ताओं का प्रयोग करेंगे सबसे अच्छा प्रदर्शन करना होगा। उदाहरण के लिए

$("ul li").slice(7) 

है बेहतर

रूप

$("ul li:gt(6)") 

मैं तुम्हें जब भी यह संभव है अधिक सटीक चयनकर्ताओं का उपयोग करने की सिफारिश करेंगे। उदाहरण के लिए माता-पिता <ul> तत्व id="menu1" तो आप

$("#menu1 >li").slice(7) 

अच्छे परिणाम के लिए

का उपयोग कर सकते है या नहीं। इससे आपके पृष्ठ पर एकाधिक<ul> तत्वों के मामले में अतिरिक्त सहायता मिलेगी।

कोई भी उल्लेख कर सकता है: चयनकर्ता "ul li:gt(6)" जल्दी से काम करता है। यह सही है, लेकिन आपको यह नहीं भूलना चाहिए कि आप लूप के अंदर कभी-कभी चयनकर्ताओं का उपयोग करते हैं या कार्यों के अंदर इसका उपयोग करते हैं जिन्हें लूप के अंदर बुलाया जाएगा। तो 10ms और 30ms के बीच का अंतर अधिक स्पष्ट हो सकता है यदि निष्पादन समय 100 से गुणा हो जाएगा।

इसके अलावा कोई व्यक्ति खुद से सवाल पूछता है कि कुछ चयन कैसे कार्यान्वित करें और उत्तर प्राप्त करें, वह कोड का उपयोग करेगा पैटर्न स्थायी रूप से। मुझे लगता है कि पैटर्न का उपयोग करना बेहतर होगा जिसमें प्रदर्शन लाभ होगा। ऐसा नहीं है

UPDATED: $("ul li:gt(6)"), $("ul li").slice(7) और $("#menu1 >li").slice(7) चयनकर्ताओं मैं अतिरिक्त the demo बना के प्रदर्शन में अंतर साफ करने के लिए। हर कोई उस वेब ब्राउजर में अंतर का परीक्षण कर सकता है जिसका वह उपयोग करता है। आपको अतिरिक्त रूप से यह नहीं भूलना चाहिए कि पृष्ठ के मामले में कई अन्य तत्व आईडी चयनकर्ता बेहतर काम करेंगे।

अपने कंप्यूटर पर $("ul li").slice(7) के निष्पादन के समय और $("#menu1 >li").slice(7) ही के बारे में हैं (पेज बहुत कम तत्व) और के बारे में 2.5-4.5 समय $("ul li:gt(6)") के लिए के रूप में बेहतर है। परिणाम li आइटम, पृष्ठ पर तत्वों की संख्या और कई अन्य चीजों की संख्या पर निर्भर कर सकते हैं, लेकिन मुझे आशा है कि परीक्षण स्पष्ट दिखाएगा कि slice के उपयोग का प्रदर्शन :gt (जैसा कि हम पहले संदर्भित jqGrid दस्तावेज में पढ़ सकते हैं)।