jquery है। हमेशा उपयोगी है?

Question

मैं इस तरह कुछ HTML है:

<div id="MyDiv"> 

    <div class="Class1"> 
    <div class="SClass1"></div> 
    </div> 
    <div class="Class2"></div> 

</div> 

वहाँ कोई अंतर

और के बीच

$('#MyDiv').find('.SClass1').show(); 

$('#MyDiv .SClass1').show(); 

Answer 1

आप मामले में, find() का उपयोग कर (सुंदर बेहोश है पठनीयता के अलावा है - लेकिन उस पर किसी और की राय होगी)। मैं केवल मामलों में जहां यह वास्तव में आवश्यक है की तरह है, में find() का उपयोग करें:

$('#MyDiv').show().find('.SClass1').css(...); 

जहां कुछ है अभिभावक तत्व पहले और एक या अपने बच्चों की अधिक के साथ कुछ और के साथ किया जा करने के लिए।

Answer 2

अनिवार्य रूप से कोई अंतर नहीं है। लेकिन find() उपयोगी है यदि आप इसे स्कोप्ड चर और this के साथ उपयोग करते हैं।

उदाहरण के लिए:

$(document).ready(function() { 
    $('.action').click(function() { 
     $(this).find('p').text("hello world"); 
    }); 
}); 

कौन सा कुछ भी जो एक वर्ग action करने के लिए "हैलो दुनिया" नामक भीतर सभी p सेट।

Answer 3

वे दोनों समकक्ष हैं। पहला एक धीमा हो जाएगा, क्योंकि आप दो प्रश्न कर रहे हैं। गति में अंतर शायद उल्लेखनीय नहीं है।

आप मामलों में find उपयोग कर सकते हैं जब आप एक प्लगइन/घटक है कि यह निर्माता में कंटेनर है और यह सुनिश्चित करें कि आप किसी भी तत्व नहीं मिलता है बनाने के लिए की तुलना में आप find से अपनी खोजों को की जड़ के रूप में उपयोग हो जाता है बना रहे हैं अपने कंटेनर के बाहर।

Answer 4

http://api.jquery.com/jquery/#selector-context कहा गया है कि:

आंतरिक रूप से, चयनकर्ता संदर्भ (, 'काल' इस) .find() विधि, तो $ के साथ लागू किया गया है $ (this) .find ('काल के बराबर है ')।

$('#MyDiv .SClass1').show(); 

जिसका मतलब है jQuery से केवल एक कदम दूर आंतरिक यह

$('#MyDiv').find('.SClass1').show(); 

View this jsPerf test case to see the differences in speed

---

@Dominic टिप्पणी में उल्लेख किया है, में कर रही है उसकी jQuery Anti-Patterns for Performance & Compression presentation, पॉल आयरिश राज्यों:

चयनकर्ता अनुकूलन

बेशक

, एक #ID से उतरते सबसे अच्छा है

// #id-based selector 
var arms = $('#container div.robotarm'); 

// hyper-optimized #id case first, then find: 
var arms = $('#container').find('div.robotarm');