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

Question

好吧，我发现了如何编写 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;
}

Answer 1

据我了解，您想向集合中添加元素，并让 .end 返回上一个集合。

您可以为此使用.add:http://jsfiddle.net/AjkRb/1/ .

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

                toAdd.push($(this)
                    .parent()
                    .next()
                    .children("td.radio")
                    .get(index));  // add native element (get instead of eq)
            });
            return this.add(toAdd);
        }
    });
})(jQuery);

用法如下:

$("tr:first td.radio")
  .addCousins()
    .addClass("red")
    .end()
  .addClass("big");