javascript - 使用jQuery编写.add *()插件函数

好的，所以我发现了如何编写jQuery插件，并且我认为这将使我的代码更加整洁。我一直在看很多教程，它们只是将样式添加到通过插件函数传递的一组匹配元素上。

...但是我想在使用我的函数时向中添加新元素。说我要这样做：

$children
    .addCousins()
        .addClass("x")
    .end()
    .addClass("y");

所以我写了这个功能，.addCousins()。它做什么，没人知道，但是知道它在理论上起作用。当调用.addCousins()时，我只需要为如何添加更多元素（如果有的话）而烦恼。对于$children中的每个元素，可以有零个或多个“表兄弟”，在插件功能中执行.each()时应添加这些表兄弟。

这是我到目前为止的内容：

(function($){
    $.fn.extend({
        addCousins: function () {
            return this.each(
                    function () {
                        var index = $(this)
                            .prevAll("td.radio")
                                .andSelf()
                                    .length - 1;

                        $(this)
                            .prev("td[rowspan=2]")
                                .parent()
                                    .next()
                                        .children("td.radio")
                                            .eq(index); // here is the "cousin" which should be added to the selection
                    }
                );
        }
    });
})(jQuery);

我整天都在尝试各种解决方案，但是还没有任何进展。表亲的选择（您不必担心选择的实现）是在内部匿名函数中完成的，但是，是的，我真的不知道该怎么做。

我希望我或多或少对我想要的东西有所了解。

编辑＃1。这是一些可测试的HTML（我认为）...

<table>
    <tr>
        <td rowspan="2">Here are cousins</td>
        <td class="radio">1</td>
        <td class="radio">2</td>
        <td class="radio">3</td>
    </tr>
    <tr>
        <td class="radio">4</td>
        <td class="radio">5</td>
        <td class="radio">6</td>
    </tr>
    <tr>
        <td rowspan="2">Here are NO cousins</td>
        <td class="radio">7</td>
        <td class="radio">8</td>
        <td class="radio">9</td>
    </tr>
</table>

...以及我更新的插件功能。

(function($){
    $.fn.extend({
        cousins: function () {
            this
                .each(
                    function () {
                        var index = $(this)
                            .prevAll("td.radio")
                                .andSelf()
                                    .length - 1;

                        $(this)
                            .prev("td[rowspan=2]")
                                .parent()
                                    .next()
                                        .children("td.radio")
                                            .eq(index)
                                                .addClass("cousin");
                                            .end()
                                        .end()
                                    .end()
                                .end()
                            .end()
                            .prev()
                                .find("td[rowspan=2]")
                                    .nextAll("td.radio")
                                        .eq(index)
                                            .addClass("cousin");
                    }
                );

            return $("td.cousin")
                .removeClass("cousin");
        }
    });
})(jQuery);

如果选择了表格单元2，并传递给.cousins()，则应返回表格单元4。反之亦然，表格单元4 ...

编辑＃2。我的（尚未工作）更新：

cousins: function () {
    var $cousins = $();

    this
        .each(
            function () {
                var index =
                    $(this)
                        .prevAll("td.radio")
                            .andSelf()
                                .length - 1;
                var $next = null;
                var $prev = null;

                $next =
                    $(this)
                        .prev("td[rowspan=2]")
                            .parent()
                                .next()
                                    .children("td.radio")
                                        .get(index);
                $prev =
                    $(this)
                        .parent()
                            .prev()
                                .find("td[rowspan=2]")
                                    .nextAll("td.radio")
                                        .get(index);

                if ($next == null && $prev == null) {
                    $cousins.push($(this));
                } else {
                    $cousins.push($next);
                    $cousins.push($prev);
                }
            }
        );

    return $cousins;
}

最佳答案

Viktor，假设您的代码正确选择了感兴趣的元素（堂兄弟），那么有多种方法可以将它们添加到原始选择中。

需要考虑的是，返回的jq对象中的元素应按DOM顺序排列，幸运的是，“从jQuery 1.4开始，.add()的结果将始终按文档顺序返回（而不是简单的串联）.add()”。 pimvdb的代码正确解决了这个问题。

另一方面，我更喜欢.cousins()插件而不是.addCousins()提供的额外灵活性，其中：


.cousins()只选择表兄弟
.cousins().andSelf()等同于.addCousins()


这是.cousins()的代码：

(function($) {
    $.fn.extend({
        cousins: function(options) {
            var settings = {
                sibling_selector: '*',
                uncle_selector: '*',
                cousin_selector: '*'
            };
            if (options) {
                $.extend(settings, options);
            }
            var c = [];//cousins
            this.each(function() {
                var $this = $(this);
                var index = $this.parent().children(settings.sibling_selector).index($this);
                $this.parent().siblings(settings.uncle_selector).each(function() {
                    c.push($(this).children(settings.cousin_selector).get(index));
                });
            });
            return this.pushStack(c);
        }
    });
})(jQuery);

DEMO

笔记：


为了概括该插件，此版本接受一个选项映射（请参阅演示）。
.pushStack()允许方法链.cousins(...).andSelf()和.cousins(...).end()发挥预期的作用。