什么是更好的'parent（）'或'parents（）'？

Question

以下代碼示例獲取父節點的更好方法是什么？

...
<tr>
  <td>
    <table>
      <tr>
        <td>
          <div class="block_data">
            Hello world!!
          </div>
        </td>
      </tr>
    </table>
  </td>
</tr>




/*Javascript code 1*/
$('.block_data').parents('tr').first()...


/*Javascript code 2*/
$('.block_data').parent().parent()...

兩種代碼中哪一種更快（考慮性能，而不是編碼）？ 想象這樣的情況，有很多父母：

...
<tr>
  <td>
    ...
  </td>
</tr>
...
<tr>
  <td>
    <div>
      <div>
        <div>
          <div class="block_data">
            Hello world!!
          </div>
        </div>
      </div>
    </div>
  </td>
</tr>

Answer 1

由於它們中的兩個都無法真正正確地實現您所需的功能，因此哪種方法更快的問題就不那么重要了，您不覺得嗎？ 您正在尋找的是closest() ，而不是parent()或parents() 。 通常，在確定性能正確之前，先考慮性能可能是一個壞主意。

Answer 2

您的使用

.parents('tr').first()

將承受DOM的更改，其中帶有處理程序的元素將嵌套得更深。

在這種情況下，我寧願使用

.parents('tr:first')

另一個答案提到了closest('tr') 。 兩者之間確實是一個折騰。

有些人喜歡使用.parents()因為它的名稱更具描述性。 但是您需要知道，如果有多個匹配項，它將返回多個結果。 那就是您需要.first()或:first來獲取第一個的地方。

在.closest()和.parents() ，性能因瀏覽器而異。 我在一些快速測試中發現IE更喜歡.parents() ，而FF和Webkit更喜歡.closest() 。

Answer 3

在我看來，最好使用parents()因為如果您的代碼發生更改，您將完全引用其他元素。 想法有點慢，但是您那里只有幾個節點，因此影響不大。

與編寫許多.parent().parent().parent().parent().parent().parent().parent().parent() parents()並找到所需的元素要好（在其他情況下） .parent().parent().parent().parent().parent().parent().parent().parent() 。 這樣，代碼更易於維護，恕我直言。