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

进行性能测量是一件非常好的事情。这正是在这种情况下应该做的事情。如果所有这些都在练习中看起来运行顺畅，并且您对性能感到满意，请选择最易读的（第二个和第三个看起来不错）。

Answer 4

我想我看到John Resig的演示文稿说最近（）更优化，并且它有一定道理。 Closest（）是jQuery的新增功能，可以解决这个丑陋的parent（）。parent（）链。另一方面，parents（）返回一个与你的foo类匹配的父类数组，在搜索方面比找到第一个元素并停止搜索的nearest（）更贪婪。

我敢打赌，如果你正在寻找最接近的匹配，那么最接近（）是最有效的。

Answer 5

我无法对实际速度发表评论，但是第一个将你与特定的元素联系起来，我会回避它。

就个人而言，无论如何，我都试图谨慎使用班级选择器。我意识到通常没有其他方法，但如果我能够考虑ID选择器，那么我知道性能可能会提高。

Answer 6

您也可以使用parents('.foo:first')。我猜这与closest()几乎相同。

Answer 7

Firefox 3.6.3中的快速测试表明，parents('.foo').eq(0)实际上明显快于closest('.foo')。它是否具有可维护性是值得商榷的，但在具体情况下可能会更加“有效”。

哪个更有效：.parent（）。parent（）。parent（）〜或〜parents（“。foo”）〜或~extree（“。foo”）

7 个答案: