1

さて、jQueryプラグインの作成方法を発見しました。これにより、コードが大幅に整理されると思います。プラグイン関数に渡された一致する要素のセットにスタイルを追加するだけのチュートリアルをたくさん見てきました。

...しかし、関数を使用するときに新しい要素を追加したいと思います。私がこれをやりたいと言ってください：

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

だから私はこの関数を書いた、.addCousins()。それが何をするのか、誰も知りませんが、理論的には機能することを知っています。が呼び出されたときに、要素を追加する方法（存在する場合）に頭を悩ませるだけです.addCousins()。の各要素に$childrenは、0個以上の「いとこ」が存在する可能性があります。これは.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、前のセットに戻してもらいたいと思っています。

これに使用できます：http .add：//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 に答える