基于其父节点筛选jQuery集中的元素

假设我有两个应用了相同CSS的容器及其子项

<div class="wrapper">
    <div class="item">item</div>
    <div class="dummy">distrating item</div> <!-- dummy one -->
    <div class="item">item</div>
    <div class="item">item</div>
    ...
</div>
<div class="wrapper">
    <div class="item">item</div>
    <div class="dummy">distrating item</div> <!-- dummy one -->
    <div class="item">item</div>
    <div class="item">item</div>
    ...
</div>

然后写一个jQuery插件，它应该对这些项做些什么，但是对于每个容器，我应该如何从整个集合中得到属于每个容器的项的子集呢

$.fn.extend({
    randomize: function() {
        if (this.length > 1)
        {
            var set = this;
            var origSelect = set.selector;
            var containers = this.parent();
            $.each(containers, function() {
                var container = $(this);
                var items = set.filter(?????);
                ....
            });
        }
        return this;
    }
});

根据内部函数中的数据：

• 整套
• 原始元素选择器
• 当前容器

是否有一些jQuery选择器可以帮助我从整个集合中获取属于特定项的项的子集

第一种可能性 这当然行不通：

$(origSelect, container);

这相当于

$(".wrapper .item", ".wrapper");

因为容器CSS类是原始选择器的一部分。如果不是的话，它会起作用的。但我无法控制

第二种可能性 过滤

container.children();

也将失败，因为它还将选择虚拟项

但其思想是重用现有的jQuery集，这当然比在这两种情况下重新选择DOM节点要快

所以基本上我想要的是：

set.filter(something);

---

但是我不知道是否有我想要的过滤器。

您可以将每个项目的父元素与当前容器元素进行比较：

$.each(containers, function() {
    var container = $(this);
    var items = set.filter(function() {
        return this.parentNode == container[0];
    });
    // ...
});

你可以试试这个

$.fn.extend({
    randomize: function() {
        if (this.length > 1)
        {
            var set = this;
            var origSelect = set.selector;
            var selectorArr = origSelect.split(" ");
            var itemSelector = selectorArr[selectorArr.length - 1];
            var containers = this.parent();
            $.each(containers, function() {
                var container = $(this);
                var items = container.filter(itemSelector);
                ....
            });
        }
        return this;
    }
});

---

这不起作用，因为集合中的所有项都满足条件

。项
，因此您的筛选将返回完整的集合。不起作用<代码>容器
始终只是一个元素。对它进行过滤毫无意义。您可能想编写
container.children（itemSelector）
，但在这种情况下，最好只使用
container.children（origSelect）
，它将返回正确的项目。问题是原始集合没有被重用，所以必须重新执行元素选择。仅供参考：我已经发布了一个公共jQuery插件，可以进行转置。检查一下我的密码，如果你需要的话可以拿到密码。可能就是这样。你为什么不直接使用
return$（this）.最近的（container）.length==1
？@Robert，说得好，我想我太专注于
.wrapper
类：）我个人认为测试
length
会让意图不那么清晰，虽然.My项始终是其容器的直接子项，因为容器是在此行
var containers=this.parent（）中检索的可以在我的代码中看到。按照您的建议使用
parent（）
只能用于DOM元素比较，因为您只能为
parent（[selector]）
函数提供字符串选择器。但对于那些应该被过滤掉的项目，它可能会更快。尤其是当项目位于DOM树的深处时，因此
最近的
将遍历许多节点。@Robert，实际上
最近的（）
会在与选择器匹配的第一个元素处停止（与
父项（）
不同）。您的问题中对
parent（）
的调用是对的，不过，我会相应地更新我的答案。仅供参考：我已经发布了一个公共jQuery插件，可以进行转置。请检查我的密码，如果需要，请获取密码。
$.fn.extend({
    randomize: function() {
        if (this.length > 1)
        {
            var set = this;
            var origSelect = set.selector;
            var selectorArr = origSelect.split(" ");
            var itemSelector = selectorArr[selectorArr.length - 1];
            var containers = this.parent();
            $.each(containers, function() {
                var container = $(this);
                var items = container.filter(itemSelector);
                ....
            });
        }
        return this;
    }
});