jQuery如何遍歷DOM？

我想知道當你使用選擇器時，jQuery如何遍歷DOM。它是否會查找每個「第一級」元素，然後查看其中每個元素？還是一個一個地看待這些「第一級」元素的每個孩子？jQuery如何遍歷DOM？

讓我解釋一下我想象中的有一些簡單的例子，給出了以下選擇：

$("div p#target")

是否進行更象：

[1] <div> 
    [3] <div> 
     [5] <p id="target"></p> 
     </div> 
    </div> 
[2] <div> 
    [4] <div> 
      <p></p> 
     </div> 
    </div>

或者像：

[1] <div> 
    [2] <div> 
     [3] <p id="target"></p> 
     </div> 
    </div> 
    <div> 
     <div> 
      <p></p> 
     </div> 
    </div>

來源

2011-10-31 Pioul

jQuery使用SizzleJS，它不是一個回答你的問題，但也許他們的文檔可以幫助您：HTTP：// sizzlejs。 com /和https://github.com/jquery/sizzle/wiki/Sizzle-Home – Thys

JQuery並不總是使用嘶嘶聲。例如，'$（'＃mydiv'）'不會使用嘶嘶聲。在chrome和firefox中，'$（'。mydiv'）'不會使用嘶嘶聲，但是在IE <9中它會。 – AlienWebguy

好吧，沒有可預測的方式知道它會如何工作然後：/ – Pioul

穿越發生在同一順序的元素在DOM：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
    <head> 
     <title>query traversal order</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    </head> 
    <body> 
     <ul> 
      <li id="parent1"> 
       <ul> 
        <li id="child1"></li> 
        <li id="child2"></li> 
       </ul> 
      </li> 
      <li id="parent2"> 
       <ul> 
        <li id="child3"></li> 
        <li id="child4"></li> 
       </ul> 
      </li> 
     </ul> 
     <script type="text/javascript"> 
      // keep a list of ids 
      var arr = []; 
      // loop over all li elements 
      $('li').each(function(){ 
       // add their id to the array 
       arr.push($(this).attr('id')); 
      }); 
      // show contents of the array 
      alert(arr.join(', ')); 
     </script> 
    </body> 
</html>

這將提醒「parent1，child1，的child2，parent2，child3，child4」;

來源

2011-10-31 19:42:08 Kris

在每個已知的瀏覽器中？看一下上面有些人的看法，看起來並不一致。我最終可以自己嘗試，但是誰知道，也許你已經這樣做了：D – Pioul

嗯，不，我直接從TextMate中直接在Safari中運行它，但它有很多意義，因爲它必須找到文檔中的所有節點。任何其他命令將更難以實現樹遍歷。 – Kris

確實如此，即使「建立感知」不足以證明任何事情。如果我們錯了，我會在一些瀏覽器中運行你的代碼片段，然後回到這裏。 – Pioul

如果你的意思是它通過它們的順序，我假設這不是jQuery本身，而是實際的DOM功能。這可能與實現有關，我不會依賴這個（除非它在規範中定義）。

你想要完成什麼以瞭解這些細節？也許我們可以幫助解決實際問題。

來源

2011-10-31 19:35:31

遍歷很可能指定以文檔順序發生，即。深度優先（OP中的圖2）。 – AKX

我並沒有面對任何特定的問題，但我廣泛使用jQuery，並知道它如何在裏面工作將有助於我做出更好的選擇器例如。如果它像我的第一個例子那樣工作，我寧願給第一個div一個id，這樣它就不會打擾第二個 – Pioul

在你的榜樣，我倒是希望它會處理這樣的：

<div> 
[2] <div>     //check it matches the selector 
    [1] <p id="target"></p> //document.getElementById is cheap 
    </div> 
</div> 
<div> 
    <div> 
     <p></p> 
    </div> 
</div>

來源

2011-10-31 19:48:58 Eric

哈哈是的，這是真的，但這個例子是爲了演出，我對更復雜的DOM會發生什麼感興趣 – Pioul

jQuery如何遍歷DOM？

回答

相關問題