jquery - 在 jQuery 中创建一个 "Collection of Collections"

Question

我有一些大致如下的 HTML:

<div id="x">
   <div class="equal-height"></div>
   <div class="equal-height"></div>
   <div class="equal-height"></div>
</div>

<div>
   <div id="y>
      <div class="equal-height"></div>
      <div class="equal-height"></div>
   </div>
</div>

我不确定这是否可行，但我想创建一个返回“集合的集合”的 jQuery 表达式。在我的示例中，将有一个包含两个元素的“外部集合”。第一个元素是 3 div 的集合嵌套在 <div id="x"> 中的元素而第二个元素是两个 div 的集合<div id="y"> 内的元素.

换句话说，我想要一个包含兄弟 <div class="equal-height"> 的所有集合的集合。元素。我可以想到一个通用的方法，但它并不漂亮。

我不关心生成的集合是否是数组数组的 jQuery 集合。

我应该在原来的帖子中明确表示我不想对“x”和“y”id 进行硬编码。我只想要class="equal-height"的所有家长以及equal-height children 自己。

Answer 1

没有任何内置的 jQuery 方法可以完成您所要求的操作，因为所有 jQuery 对象都是对象的平面列表，而不是 2D 数组。

对于与文档中任何位置的 .equal-height 元素一起使用的通用答案，我能想到的最简单的事情就是获取所有 .equal-height元素，然后通过检查父数组将它们拆分为子数组:

var result = [];
$(".equal-height").each(function(index, element) {
    if (!result.length || element.parentNode !== result[result.length - 1][0].parentNode) {
        result.push([element]);
    } else {
        result[result.length - 1].push(element);
    }
});

// display results
document.write("[" + result.map(function(item) {
  return JSON.stringify(item.map(function(obj) {
    return obj.id;
  }));
}) + "]");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="x">
   <div id="a" class="equal-height"></div>
   <div id="b" class="equal-height"></div>
   <div id="c" class="equal-height"></div>
</div>

<div>
   <div id="y">
      <div id="d" class="equal-height"></div>
      <div id="e" class="equal-height"></div>
   </div>
</div>

而且，这是另一个方案，它获取唯一父元素的列表，然后为每个父元素构建与选择器匹配的子元素列表:

var result = $('.equal-height').parent().get().map(function(item) {
    return $(item).children(".equal-height").get();
});

// display results
document.write("[" + result.map(function(item) {
  return JSON.stringify(item.map(function(obj) {
    return obj.id;
  }));
}) + "]");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="x">
   <div id="a" class="equal-height"></div>
   <div id="b" class="equal-height"></div>
   <div id="c" class="equal-height"></div>
</div>

<div>
   <div id="y">
      <div id="d" class="equal-height"></div>
      <div id="e" class="equal-height"></div>
   </div>
</div>

---

如果您想将 x 和 y 元素的知识硬编码为父元素，您可以简单地执行以下操作:

var result = [$("#x .equal-height").get(), $("#y .equal-height").get()];

或者相同的概念可以这样写:

var result = ["#x", "#y"].map(function(item) {
    return $(item + " .equal-height").get();
});