Question

假设我有两个容器，它们应用了相同的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选择器定义为：

$(".wrapper .item")

然后编写一个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);

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

Answer 1

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

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

Answer 2

你可以试试这个

$.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;
    }
});

基于父节点过滤jQuery集中的元素

第一种可能性

第二种可能性

2 个答案: