1

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

2 回答 2

2

据我了解，您想将元素添加到集合中，并.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");
于 2012-07-28T14:52:58.917 回答
1

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

演示

笔记：

  • 为了概括插件，这个版本接受一个选项映射（见演示）。
  • .pushStack()允许方法链.cousins(...).andSelf()并按.cousins(...).end()预期运行。
于 2012-07-28T04:19:40.770 回答