Question

搜索像这样结构的一小组元素有什么好方法？我希望能够找到任何给定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>
`);

.find("#id")可以找到aa，但不能a或b
.filter("#id")可以找到a和b，但不能aa或bb
我也试过.siblings().addBack().find("#id")，但这似乎也不起作用（甚至找不到a）

我似乎无法解决find错过根元素的事实，但filter错过了后代元素。我需要两者结合......

Answer 1

从jQuery 1.11.2和2.1.2开始，你可以有效地使用这样的documentFragment：

$(document.createDocumentFragment())

这不会引入一个元素。如果您将element内容附加到其中，并查询#a的父级，那么您将无法获得匹配。

＆＃13;

var 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>
`);

// wrap elements in a document fragment
elements = $(document.createDocumentFragment()).append(elements);

// elements.find('#a') works, but second argument of $() can be used: 
console.log('#a', $('#a', elements).length);
console.log('#ab', $('#ab', elements).length);
console.log('#ba', $('#ba', elements).length);

console.log('parents of #a:', $('#a', elements).parent().length);

＆＃13;

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>

＆＃13;

Answer 2

我想最终解决方案只是使用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}'`);

搜索元素包括根和后代

2 个答案: