Javascript 搜索元素，包括根和子元素_Javascript_Jquery_Html_Dom_Ecmascript 6

Javascript 搜索元素，包括根和子元素

javascript jquery html dom ecmascript-6

Javascript 搜索元素，包括根和子元素,javascript,jquery,html,dom,ecmascript-6,Javascript,Jquery,Html,Dom,Ecmascript 6,搜索像这样结构的一小部分元素的好方法是什么？我希望能够在给定ID的情况下找到任何元素，而不必确切知道在哪里查找它 const elements = $(` <div id="a"> <div id="aa"></div> <div id="ab"></div> </div> <div id="b"> <div id="ba"></div>

搜索像这样结构的一小部分元素的好方法是什么？我希望能够在给定ID的情况下找到任何元素，而不必确切知道在哪里查找它

const elements = $(`
   <div id="a">
      <div id="aa"></div>
      <div id="ab"></div>
   </div>
   <div id="b">
      <div id="ba"></div>
      <div id="bb"></div>
   </div>
`);

const元素=$(`
`);

```
.find（“#id”）
```
可以找到
```
aa
```
，但不能找到
```
a
```
或
```
b
```
```
.filter（“#id”）
```
可以找到
```
a
```
和
```
b
```
，但不能找到
```
aa
```
或
```
bb
```
我还尝试了
```
.sibbins（）.addBack（）.find（#id”）
```
，但这似乎也不起作用（甚至找不到
```
a
```
）

我似乎无法回避这样一个事实：

find

忽略了根元素，而

filter

忽略了子元素。我需要将这两种方法结合起来……

我想最终的解决方案是同时使用

查找和筛选，然后将两者都选中。他们一起搜索一切
const search = `#${elementName}`;

const maybeAtRoots = elements.filter(search);
if (maybeAtRoots.length)
   return maybeAtRoots;

const maybeUnderRoots = elements.find(search);
if (maybeUnderRoots.length)
   return maybeUnderRoots;

throw new Error(`failed to find element '${elementName}'`);

从jQuery 1.11.2和2.1.2开始，您可以有效地使用documentFragment
，如下所示：
$(document.createDocumentFragment())

这不会引入元素。如果将元素
内容附加到该元素，并查询#a
的父元素，则不会得到匹配项

var元素=$(`
`);
//将元素包装到文档片段中
elements=$（document.createDocumentFragment（））.append（elements）；
//元素。find（'#a'）起作用，但可以使用$（）的第二个参数：
log（'a'，$（'a'，elements）.length）；
log（'ab'，$（'ab'，elements）.length）；
log（'ba'，$（'ba'，elements）.length）；
log（'a:'的父元素，$（'a'，元素）.parent（）.length）
总是使用父字母+下一个字母的格式吗？@mbadeveloper不，这只是用来描述继承人的一个例子，但始终是div父和div子的？@mbadeveloper它应该能够进入任何深度，而不仅仅是两个级别。我建议使用$（“div”）并创建一个函数递归函数并将其传递给当前元素，然后检查此解决方案是否有错误的ChildsMethoding？这段代码正在运行。多亏了对问题的评论，我稍微改进了解决方案。我不知道为什么我会得负分，“同时使用筛选和查找”是对我的问题的明显而正确的答案。嗯。。唯一的问题是，如果我挂起文档片段引用，那么一旦我将其添加到页面中，它就会被清空。当进行手动搜索时，我能够保留我的元素引用并根据需要使用它。不过谢谢，我不知道document.createDocumentFragment
。如果您想在将文档片段添加到文档后仍保留该文档片段，请克隆它：$（'body'）。追加（elements.clone（））当然，您将使用不同的副本，而不是文档中的节点。节点不能同时是文档和文档片段的一部分。