javascript - 如何检测哪个元素包含所有其他 X 元素

Question

(希望这个问题还没有被问到:我没有通过关键字搜索找到它)

我想使用 jQuery 检测哪个元素(div、span 等)包含所有其他 XKindOfElement。

意思是，例如，如果我的屏幕中有多个复选框，我想知道哪个 div 包含所有这些复选框。

<div id="block1">
  <div id="underblock1">
    <input type="checkbox" name="thing[]" value="1" />
    <div id="underunderblock1">
      <input type="checkbox" name="thing[]" value="2" />
    </div>
  </div>
  <div id="underblock2">
    <input type="checkbox" name="thing[]" value="3" />
  </div>
</div>

在此示例中，它将返回 div#block1，因为只有它包含页面的所有 input[type="checkbox"]。

希望您能理解并帮助我!

更新

正在思考一些事情...您对这个过程有何看法:

1. 检查页面中是否存在我们的元素
2. 如果是，请计算该元素存在的数量并保存(假设 count)
3. 检查第一个元素 find 的父元素是否包含所有 count 个元素
4. 如果没有，检查父级的父级是否包含所有 count 元素，
5. 等等
6. 当检查的父级确实包含所有 count 元素时:它是我们的“最小全局父级”!

可以吗？还是太慢、太“膨胀”……？

Answer 1

我不太熟悉所有 jQuery 帮助器方法，但这种方法可能适合您:

• 收集您想要包含的所有元素
• 收集它们的 parents 数组并反转它们:所有这些数组现在都以 html > body 开头，一直到实际元素
• 循环遍历父数组并检查其他父数组在当前索引处是否具有相同的元素
• 第一个不匹配的元素标记最后一个共享父元素的索引

注意:您可能需要稍微重构一下代码，以确保不会遇到任何边缘情况的错误。

var required = $("input[type=checkbox]");

var getClosestParent = function(elements) {
  var maxLength = 0;
  var allParents = [];

  elements.each(function(i, el) {
    var parents = $(el).parents().toArray().reverse();
    maxLength = Math.max(maxLength, parents.length);
    allParents.push(parents);
  });

  var ref = allParents[0];
  var others = allParents.slice(1);

  for (var i = 0; i < maxLength; i += 1) {
    for (var j = 0; j < others.length; j += 1) {
      if (ref[i] !== others[j][i]) {
        return ref[i - 1];
      }
    }
  }

  return null;
}

console.log(getClosestParent(required).id);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
  <div id="underblock1">
    <input type="checkbox" name="thing[]" value="1" />
    <div id="underunderblock1">
      <input type="checkbox" name="thing[]" value="2" />
    </div>
  </div>
  <div id="underblock2">
    <input type="checkbox" name="thing[]" value="3" />
  </div>
</div>