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表达式，它将返回＆＃34;集合的集合＆＃34;。在我的例子中，将会有一个＆＃34;外部集合＆＃34;有两个元素。第一个元素是嵌套在div中的3个<div id="x">元素的集合，而第二个元素是div中两个<div id="y">元素的集合。

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

我不在乎生成的集合是否是数组数组的jQuery集合。

我应该在原帖中明确表示我不想硬编码＆＃34; x＆＃34;和＆＃34; y＆＃34; IDS。我只想要class="equal-height"的所有父母以及equal-height孩子自己。

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();
});

Answer 2

var containers = $('.equal-height').parent();

如果我了解你，你只是以错误的方式接近它。 parent jQuery助手应该可以解决这个问题。

选择器将选择要封装的元素，以便您可以通过parent访问容器div。获得父div后，您可以调用containers.children()来获取子集合。

Answer 3

如果要对输入属性进行硬编码，可以使用map with array。

var childSelector = '.equal-height';

function getSubCollection(id) {
  return $('#' + id).find(childSelector);
}
var collectionOfCollection = ['x', 'y'].map(getSubCollection);
console.log(collectionOfCollection);

Answer 4

您可以使用各种jquery和css选择器来选择代码的不同部分。

为了根据ID选择所有收藏品，您可以执行以下操作，并使用无限量的逗号分隔您要选择的ID。

var collections = $("#x,#y");

这会选择你的x div和你的y div，不包括他们的孩子。

要选择直接子项，您可以这样做：

var collections = $("#x,#y").children(); //or to select only their direct div children:
var collections = $("#x > div, #y > div");

要选择所有的后代（他们的子女等等），您可以这样做：

var collections = $("#x *,#y *"); //or to select all of their div descendants:
var collections = $("#x div, #y div");

您还可以使用您的班级来选择包含您班级的项目（这将选择您在班级中指定的项目，这些项目是具有ids x和y的div的子项）：

var collections = $("#x .equal-height, #y .equal-height");

您可以编辑所有这些内容，例如更改背景颜色：

collections.css("background-color","blue");

对于所有这些不同的选择器（以及更多），我不明白为什么你需要一个阵列，你只需要知道你想要选择什么，以便之后你可以编辑那部分。有些方法可以根据孩子的类型，身份，类别，属性，孩子的指数等来过滤孩子。

我希望这有帮助，这里是Jquery选择器的链接：

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

编辑：让父母和子女都得到：

var collections = $("#x,#y,#x .equal-height, #y .equal-height");

这会将所有项目分配给集合，但不是有条理的，这是我认为你的问题。

创建一个＆＃34;集合集合＆＃34;在jQuery中

4 个答案: