अंतर। लगता है ('एक')

Question

मैं निम्नलिखित है संरचना

<ul id="tabs" class="nav nav-tabs"> 
    <li><a href="#aaa" hashval="aaa">AAA</a></li> 
    <li><a href="#bbb" hashval="bbb">BBB</a></li> 
    <li><a href="#ccc" hashval="ccc">CCC</a></li> 
    <li><a href="#ddd" hashval="ddd">DDD</a></li> 
</ul> 

अब मैं निम्नलिखित कोड से एंकर टैग पर काम कर रहा हूँ और जो ठीक काम कर रहा है।

$('#tabs a[href="#ddd"]').tab('show'); 

मैं पिचर्म का उपयोग कर रहा हूं जो "आईडी चयनकर्ता के साथ प्रस्तावना" कहकर लाइन के लिए चेतावनी जोड़ता है। जब मैं इसे क्लिक करता हूं,

$('#tabs').find('a[href="#ddd"]').tab('show'); 

दोनों ठीक काम कर रहे हैं लेकिन मुझे अंतर समझ में नहीं आता है।

$('#tabs a[href="#ddd"]') और $('#tabs').find('a[href="#ddd"]') के बीच अंतर क्या है, दोनों में अंतर क्या है?

Answer 1

$("#tabs a")सही से मूल्यांकन करता छोड़ दिया करने के लिए - जो दोनों Sizzle चयनकर्ता इंजन और querySelectorAll के मूल दिशा है - यानी पहले यह पेज में लंगर के सभी तत्वों पाता है और उसके बाद #tabs के तहत उन लोगों के लिए यह और भी अधिक संकीर्णता।

$("#tabs").find("a") का मूल्यांकन करता है - अधिक सहज - सही बाएं से यानी प्रथम यह #tabs, और फिर केवल इसके तहत लंगर तत्वों पाता है।

स्पष्ट रूप से उत्तरार्द्ध better performance उत्पन्न करेगा, लेकिन यह केवल संचित रूप से ध्यान देने योग्य होगा; यही है, अगर आप हजारों प्रश्नों को चलाते हैं। अन्यथा, अंतर नगण्य है।

Answer 2

दूसरा एक बहुत तेज़ है। jQuery के चयनकर्ता को Sizzle का चयन करने का कारण, जो से से पर छोड़ दिया गया है, इसके विपरीत नहीं है।

इसका मतलब है कि चयनकर्ता

$('#tabs a[href="#ddd"]') 

पहले एक टैग है, जो #ddd करने के लिए विशेषताhref सेट होता है के लिए डोम दस्तावेज़ प्रश्नों। यह <a> टैग हर किसी को प्राप्त करने के लिए, उन सभी को फ़िल्टर करता है। अंत में, यह माता-पिता #tabs खोजने की कोशिश कर, प्रत्येक नोड के लिए डोम पेड़ को पार करता है।

href="#ddd" के साथ 1.000 टैग वाली साइट की कल्पना करें, यह कितना धीमा होगा।

फिर।

अन्य विविधता पिचर्म सुझाव देते हैं, पहले तत्व #tabs का पता लगाने के लिए है। यह सुपर-त्वरित है, क्योंकि jQuery मूल ब्राउज़र विधि getElementById() का उपयोग कर सकता है। इस नोड होने के कारण, यह मेल खाने वाले सभी टैग खोजने के लिए पर जा सकता है। ऐसा करके, all tags in the whole DOM-tree पर, जांच की आवश्यकता नहीं है। केवल वे जो वास्तव में #tabs में हैं।

अधिक जानकारी के लिए, कृपया this page in the documentation देखें।

Answer 3

प्रभाव वही है: #ddd के रूप में #tabs के वंशज हैं जो एंकर खोजें। यह अंतर प्राप्त करने के तरीके में अंतर है।

पहला समाधान एंकरों को पाता है और फिर जांच करता है कि क्या वे #tabs के वंशज हैं।

दूसरा समाधान #tabs पाता है और फिर एंकरों को पाता है। जो निश्चित रूप से तेज़ होना चाहिए।

Answer 4

.find() बेहतर प्रदर्शन बुद्धिमान है अपने पहले चयनकर्ता

$('#tabs a[href="#ddd"]').tab('show'); 

की तुलना में, यही वजह है कि pycharm चयनकर्ता .find()

$('#tabs').find('a[href="#ddd"]').tab('show'); 

http://vaughnroyko.com/the-real-scoop-on-jquery-find-performance/

Answer 5

उपयोग करने के लिए यह परिवर्तन के रूप में "Increase Specificity from Left to Right" में कहा गया है :

jQuery के चयनकर्ता इंजन का थोड़ा ज्ञान उपयोगी है। एक सरणी में

$("p#intro em"); 

भार हर उन्हें तत्व: यह इस तरह के रूप में पिछले चयनकर्ता से काम करता है पहले ऐसा है, तो पुराने ब्राउज़र में, एक प्रश्न। इसके बाद यह प्रत्येक नोड के माता-पिता को काम करता है और उन लोगों को अस्वीकार करता है जहां पी # परिचय नहीं मिल सकता है। क्वेरी पृष्ठ पर सैकड़ों एम टैग होने पर विशेष रूप से अक्षम होगी।

आपके दस्तावेज़ के आधार पर, क्वेरी को सबसे पहले योग्यता प्राप्त चयनकर्ता पुनर्प्राप्त करके अनुकूलित किया जा सकता है। इसके बाद इसे बाल चयनकर्ताओं के लिए शुरुआती बिंदु के रूप में उपयोग किया जा सकता है, उदा।

$("em", $("p#intro")); // or 
$("p#intro").find("em"); 

लेकिन Test case कहते $("#tabs > a")सबसे तेजी से

Answer 6

अंतर यह है कि लगता है(), क्या आप पहले से किए गए एक चयन के आधार पर तत्वों का एक सेट पर फिल्टर करने के लिए अनुमति देता है लौटने और है किया जाएगा यदि मामला है तो तत्वों की सरणी।

$('#tabs').find('a[href=“#ddd”]'); 

और यह एक तत्व के लिए खोज क्योंकि आप कह रहे हैं आप की "हे, #tabs करने के लिए जाना है और मुझे वहाँ के सारे a[href=“#ddd”] लगता है" के बजाय कहा, "हे, मुझे यह सभी लोग $('#tabs a[href=“#ddd”]') में मिल के एक अधिक विशिष्ट तरीका है मेरे पास जो कोड है। "

Answer 7

हालांकि, ज्यादातर मामलों में, प्रदर्शन एकमात्र अंतर है, दृष्टिकोण में अंतर आपके द्वारा उपयोग किए जाने वाले चयनकर्ताओं के आधार पर आपके कोड के नतीजे को भी प्रभावित कर सकता है।

उदाहरण के लिए, $("table").find("tr:even").addClass("even"); वापस आने वाली प्रत्येक तालिका में "अन्य" पंक्ति को "अन्य" पंक्ति में जोड़ देगा।तो, अगर "भी" वर्ग पंक्तियों में पाठ को बोल्ड बनाता है और आप दो तालिकाओं, 3 पंक्तियों के साथ एक है, तो आप निम्नलिखित परिणाम मिलेगा:

---

इस तालिका से एक है, पंक्ति 1

है

इस तालिका से एक है, पंक्ति है 2

इस तालिका से एक है, पंक्ति है 3

---

इस तालिका दो, पंक्ति है 1

इस तालिका दो, पंक्ति है 2

इस तालिका दो, पंक्ति 3

---

दोनों ही मामलों में, 1 और 3 पंक्ति है प्रत्येक तालिका का (यानी, "यहां तक ​​कि" पंक्तियां भी। । । मुझे JQuery के even फ़िल्टर पर अजीब पंक्तियों का चयन न करें। । ।) बोल्ड हैं।

दूसरी ओर, $("table tr:even").addClass("even"); संयुक्त रूप से सभी तालिकाओं की पंक्तियों के पूरे समूह में "अन्य" पंक्ति को "अन्य" पंक्ति में जोड़ देगा।

---

इस तालिका से एक है, पंक्ति है 1

इस तालिका से एक है, पंक्ति है 2

इस तालिका से एक है, पंक्ति 3

---

इस तालिका है दो, पंक्ति 1

इस तालिका दो, पंक्ति है 2

इस तालिका दो, पंक्ति 3

---

है इस स्थिति में, 1 और दूसरी तालिका के 3 पंक्ति वास्तव में 4 और 6 की पंक्तियों हैं <tr> तत्वों का पूरा समूह, इसलिए उन्हें "विषम" माना जाता है। दूसरी तालिका की दूसरी पंक्ति, हालांकि, पूरे संग्रह की 5 वीं पंक्ति है और इस प्रकार, इसे "यहां तक" माना जाता है और बोल्ड किया जाता है।