Javascript 如何使用jQuery选择子项和self？

我想知道最好的方法是在jQuery中查找元素的子元素，同时在“find”中包含父元素

以下是我简化的基本HTML设置：

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

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

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

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

---

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

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

如果您想在不同的浏览器中尝试，可以在此处查看结果和测试：

注意：我已经更新了这个测试以使用div而不是表单（因为其他表单中的表单不起作用：），我们希望测试应该添加父级以获得真正性能影响的情况，如下面的注释所示

编辑

---

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

这可能更适合我的猜测（没有实际的基准测试），将是#2更有效。在#1中，您将添加容器，然后过滤整个列表，并可能再次删除它。选项#2在添加它之前检查它，不必再过滤列表来删除它。

var$allForms=$container.find（'form'）.andSelf（）

@SpYk3HH:我想重点是，

$container

可能是表单，也可能不是表单。@Luke，

元素总是

$container

的直接子元素吗，或者您想同时支持子体吗？但是在您的测试中，容器从来都不是表单，因此，

if

块永远不会执行。我认为这是一个不公平的比较。@pimvdb谢谢，这是非常正确的。一定是星期五！此外，表单不能嵌套，因此最好使用不同的示例，因为标题是关于自身和子级的，而不是特定于表单元素。我会更新测试…@CraigMacGregor-你能在上面的编辑中测试我的选项3吗？我非常感谢基准测试。@pimvdb我为您添加了第三个选项。享受：）对不起，对于阅读这个问题寻求独立答案的人来说，这不是问题。回答这个问题的选择器是？

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