哪个更有效:.parent().parent().parent()〜或〜parents(".foo")〜或~extree(".foo")

Question

我有一个A标签,触发它的伟大伟大的祖父母的动画.以下所有方法都有效,但效率最高,为什么？

$(this).parent().parent().parent().parent().parent().animate(...);

$(this).parents(".foo").animate(...);

$(this).closest(".foo").animate(...);

我怀疑第一个可能是,因为它是最明确的,但出于维护原因(嵌套可能会改变)我更喜欢第二个.它们在实践中似乎都很顺利.

Answer 1

这是一个分析:

• parent() 在DOM树中只走一层.
• parents(".foo")向上走到根并仅选择与给定选择器匹配的那些元素.foo.
• closest(".foo")走到根,但一旦元素与选择器匹配就停止.foo.

所以我会选择最后一个,closest(".foo").原因:

• 它比链接更好parent,因为如果您的文档因删除或添加了一个层次结构而发生更改,则无需更改jQuery代码.
• 这比parents(".foo"),因为它一旦找到匹配就会停止.

Answer 2

最近距离仅在您在'clicked'元素上升或处于同一水平时才有用.

例如,如果您必须遵循以下情况:

<div class="controls radio-other">
    <label class="radio"><input type="radio" name="item">Option one</label>
    <label class="radio"><input type="radio" name="item">Option two</label>
    <label class="radio"><input type="radio" name="item" class="other-option" data-othertarget="#otherone"> Other... </label>
    <input type="text" placeholder="Alternative answer" id="otherone" class="hidden">
</div>

然后closest('#otherone')就不会找到隐藏的文本字段了$('.other-option').click() .更好的解决方案是在这种情况下使用$(this).parentsUntil('.radio-other').find('#otherone')

看看我的回答,我在这里制作了一个jsperf,它反映了上面的场景和不同的解决方案.只需使用对您的HTML场景最有用的内容.结果是这parent().parent()是最快的方法,但如果你的html在使用上更灵活,这并不总是一个好的选择.添加div父级和parent().parent()休息符.

Answer 3

进行性能测量是一件非常好的事情.这正是在这种情况下应该做的事情.如果所有这些都在练习中看起来运行顺畅,并且您对性能感到满意则选择最具可读性(第二和第三看起来没问题).