在jQuery中遍歷起來的最有效的方法是什麼

Question

我試圖在單擊內部嵌套按鈕時關閉父容器。在我的UI中 - 我有許多這些父容器（我在產品類別頁面上呈現了我的產品目錄的預覽窗口）。

正如您從下面的標記中可以看到的，CLOSE按鈕深深嵌套在DOM中。當用戶點擊關閉按鈕時 - 我需要隱藏（）父框1。請記住，我一次最多可以在一個頁面上顯示100個產品（100個「Box-1」）。

我的標記看起來是這樣的：

<div class="box-1"> 
    <div class="box-2"> 
    <div class="box-3">...</div> <!-- end box-3 --> 

    <div class="box-4"> 
     <div class="box-5">...</div> <!-- end box-5 --> 
     <a class="btn-close" href="#">CLOSE</a> <!-- this triggers the close event --> 
    </div> <!-- end box-4 --> 
    </div> <!-- end box-2 --> 

    <div class="box-6"> 
    <div class="box-7">...</div> <!-- end box-7 --> 

    <div class="box-8"> 
     ... 
     <div class="box-9">...</div> <!-- end box-9 --> 
    </div> <!-- end box-8 --> 
    </div> <!-- end box-6 --> 
</div> <!-- end box-1 --> 

我的問題是 - 如何最好的（也是最有效）穿越回了DOM獲得了「盒1」的保持和發佈。 hide（）方法...這是我現有的代碼。

<script> 
$productsResultItems.delegate('.btn-close', 'click', function (e) { 
    //box-1 
    $(this).parents('div.box-1').hide(); // <-- is this the best way????? 
    e.preventDefault(); 
</script> 

起初，我想這一點 -

$this.parents().find('.hover-box-large').hide(); 

這被證明是在IE7和IE8的速度很慢。我發現在選擇器中增加了更多的細節IE7的性能提高了近100倍，但IE8的速度只有4倍：IE8仍然需要大約200ms來關閉父容器，現在所有其他瀏覽器（Chrome， Safari瀏覽器，Firefox和IE7）關閉容器小於20ms。

$this.parents('div.hover-box-large').hide(); 

但是有沒有是更好的選擇方法？有什麼特別的原因，IE8是SOOOO壞在這種類型的向上穿越的？

Answer 1

最好的使用方法是closest，它找到與選擇器匹配的最近的祖先元素：

$this.closest('div.box-1').hide(); 

Answer 2

父母（）和最接近（）的唯一區別是它最接近（）停止，一旦找到匹配，因此總是返回0或1個元素。 Parents（）將把DOM中的所有內容都匹配起來。

$(this).closest('.box-1').hide(); 

Answer 3

其實.closest()應該比.parents()更快。

在jQuery Docs on .closest()，你可以找到：

.closest（）

• 始於當前元素
• 遊記了DOM樹，直到它找到了一個匹配提供的選擇器
• 返回的jQuery對象包含零個或一個元素

。父母（）

• 起始與父元件
• 向上行進DOM樹的文檔的根元素，添加各祖先元素到一個臨時集合;它然後過濾，基於選擇 集合，如果一個供應
• 返回jQuery對象包含零個，一個或多個元素

所以你的情況，.closest()將是最合適的一個，因爲你需要找到一個與你的選擇器相匹配的最接近的祖先。 parents()會過濾所有可能的祖先元素，即使它已經找到了你需要的元素。

Answer 4

不是那麼快！ closest()可能是最好但並非總是！以下是你如何找到自己。使用Firebug time() and timeEnd()函數來實際記錄您的呼叫。然後選擇適合這種情況的方法。

// 59ms 
console.time("Parent x 3"); 
$container = $element.parent().parent().parent(); 
console.timeEnd("Parent x 3"); 

// 3ms    
console.time("Closest parent"); 
$container = $element.closest('.some-class').parent(); 
console.timeEnd("Closest parent"); 

// 2ms    
console.time("Parents"); 
$container = $element.parents('.other-class').eq(1); 
console.timeEnd("Parents");