jquery - 哪种方式遍历 DOM 元素更快？

Question

假设我有这样的标记:

    <div id="comment_box">
        <div class='comment'>
            <ul>
                <li class='comment_1'>
                    </li>
                <li class='comment_2'>
                    </li>
                <li class='comment_3'>
                    </li>
                <li class='comment_4'>
                    </li>
            </ul>
        </div>
    </div>

评论框 = $('#comment_box')

$('.comment_3', commentBox) 或 commentBox.find('.comment_3') 或任何其他更快的方法？

Answer 1

以下是使用 JQuery 选择元素时需要记住的一些要点:

1.选择选择器

选择好的选择器是提高 JavaScript 性能的一种方法。一点点特殊性——例如，在按类名选择元素时包括元素类型——可以大有帮助。另一方面，太多的特异性可能是一件坏事。

选择器，例如

$('#comment_box .comment li.comment_3') is overkill,

如果选择器例如

$('#comment_box li.comment_3') will get the job done.

jQuery 提供了许多基于属性的选择器，允许使用简化的正则表达式基于任意属性的内容进行选择。

尽可能使用 ID、类名称和标签名称进行选择。

2.保存选择

jQuery 不会为您缓存元素。如果您已经做出了可能需要再次进行的选择，则应该将选择保存在变量中，而不是重复进行选择。

var commentBox = $('#comment_box');

在上面的示例中，变量名称以美元符号开头。与其他语言不同，JavaScript 中的美元符号没有什么特别的——它只是另一个字符。在这里，它用于指示该变量包含一个 jQuery 对象。这种做法只是惯例，并不强制。

将选择内容存储在变量中后，您可以在该变量上调用 jQuery 方法，就像在原始选择内容上调用它们一样。

选择仅获取做出选择时页面上的元素。如果稍后将元素添加到页面，则必须重复选择或以其他方式将它们添加到存储在变量中的选择。当 DOM 更改时，存储的选择不会神奇地更新。

您可以引用链接http://learn.jquery.com/using-jquery-core/selecting-elements/了解更多详情