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");

Answer 2

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

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

另一方面，我更倾向于使用.add()插件而不是.cousins()提供额外的灵活性，其中：

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

以下是.addCousins()的代码：

.cousins()

<强> DEMO

注意：

概括插件，此版本接受选项图（参见演示）。
(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);允许方法链.pushStack()和.cousins(...).andSelf()按预期行事。

使用jQuery编写.add *（）插件函数

2 个答案: