इन दो चयनकर्ताओं के बीच क्या अंतर है?

Question

$(this).parents('table:first > tbody > tr') 

और

$(this).parents('table:first').children('tbody').children('tr') 

Answer 1

अंतर यह है कि पहले चयनकर्ता, parents कॉल के भीतर पूरी तरह से है, जबकि दूसरा एक नहीं है।

इसलिए, पहला व्यक्ति this के सभी माता-पिता को देखता है जो table:first > tbody > tr से मेल खाते हैं। (दूसरे शब्दों में, एक trthis युक्त पहला table में है)

दूसरा एक जो table:first से मेल खाता है this की मूल मिलेगा, तो सीधे कि माता पिता की tbody रों भीतर tr रों के सभी पाते हैं। (दूसरे शब्दों में, सीधे tr रों माता पिता तालिका के अंदर के सभी)

Answer 2

हो सकता है कि एक उदाहरण में मदद मिलेगी ... इस HTML के साथ शुरू

<table border=1> 
<thead> 
    <th>Outter Table</th> 
</thead> 
<tbody> 
    <tr><td>1</td></tr> 
    <tr> 
    <td> 
    <table border=1 width=100> 
    <thead> 
     <th>Inner Table</th> 
    </thead> 
    <tbody> 
     <tr><td>2a</td></tr> 
     <tr><td class="test">2b</td></tr> 
     <tr><td>2c</td></tr> 
    </tbody> 
    </table> 
    </td> 
    </tr> 
    <tr><td>3</td></tr> 
</tbody> 
</table> 

इस स्क्रिप्ट लागू करें:

$('.test').parents('table:first > tbody > tr').addClass('foo'); 
$('.test').parents('table:first').children('tbody').children('tr').addClass('bar'); 

परिणाम:

<table border="1"> 
<thead> 
    <th>Outter Table</th> 
</thead> 
<tbody> 
    <tr class="foo"><td>1</td></tr> 
    <tr class="foo"> 
    <td> 
    <table width="100" border="1"> 
    <thead> 
     <th>Inner Table</th> 
    </thead> 
    <tbody> 
     <tr class="bar"><td>2a</td></tr> 
     <tr class="bar"><td class="test">2b</td></tr> 
     <tr class="bar"><td>2c</td></tr> 
    </tbody> 
    </table> 
    </td> 
    </tr> 
    <tr class="foo"><td>3</td></tr> 
</tbody> 
</table>