2

我想知道在 jQuery 中查找元素的子元素的最佳方法是什么，但还要在“查找”中包含父元素。

这是我简化的基本 HTML 设置：

<div id="container">
    <form id="form1"> <!-- form 1 content --> </form>
    <form id="form2"> <!-- form 2 content --> </form>
</div>

我想要这样的功能......

function getForms ($container) 
{
    // Option 1
    var $allForms = $container.find('form').andSelf().filter('form');

    // Option 2
    var $allForms = $container.find('form');
    if ($container.is('form')) $allForms.add($container);

    // Should return all the forms in the container if passed $('#container')
    // Or return just one form if passed $('#form1')
    return $allForms;
}

我相当确定选项 1 或 2 都会起作用。有谁知道上面哪个选项更有效？还有其他更优雅或更高效的选择吗？

编辑：我对选项 2 中的.is() 不满意，因为当容器中有多个 jQuery 对象时它不起作用。所以我想出了这样的事情：

// Option 3
function getContainerElements ($container, selector) {
    return $container.find(selector).add($container.filter(selector));
}

我没有对其进行过多测试，但我认为它适用于所有一般情况。

4

1 回答 1

1

根据 JSPerf 测试，选项 2 更好（在 Linux 上的 Chrome 中测试）

如果您想在不同的浏览器中尝试，您可以在此处查看结果和测试：http: //jsperf.com/children-and-self

注意：我已更新此测试以使用 div 而不是表单（因为其他表单中的表单不起作用：表单中的表单，可以吗？）并且我们想测试应该添加父级以获得根据以下评论的实际性能影响

在此处输入图像描述

编辑

根据评论中的要求添加了第三个选项性能

于 2012-10-26T21:08:12.397 回答