1

私はいつも jQuery のトラバース関数を見逃していました。あるかもしれないと思っていましたが、見逃していました。次のマークアップがあるとします。

<ul>
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a></li>
    <li><a href="#">John</a></li>
    <li><a href="#">Doe</a></li>
</ul>

ここで、クリックしたアンカーにアクティブなクラスを追加し、他のクラスを非アクティブ化する場合は、通常、次のようにする必要があります。

$('a').click(function() {
    $(this).addClass('active')
        .parent()
        .siblings()
        .find('a.active')
        .removeClass('active');
});

しかし、私がやりたいことはこれです：

var relation = function() {
    return $(this).parent().siblings().find('a.active');
};

$('a').click(function() {
    $(this).addClass('active').find(relation).removeClass('active');
});

違いを見ます？今、find引数として関数を取らないので、次のように書きました：

$.fn.traverse = function(fn) {
    return $.isFunction(fn) ? fn.call(this) : this;
};

例として、この単純な方法により、作成者が非アクティブ化との関係を指定できるようにする「アクティブ化」プラグインを作成できます。

$.fn.activate = function(fn) {
    return this.each(function() {
        $(this).addClass('active').traverse(fn || function() {
            return $(this).siblings();
        }).removeClass('active');
    });
});

そして、次のように使用します。

$('a').activate(function() {
    return $(this).parent().siblings().find('.active');
});

// or

$('a').activate(function() {
    return $(this).closest('ul').find('a.active').not(this);
});

// or

$('li').activate();

これは仕事をします。しかし、私の質問は、このようなものが jQuery のどこかに含まれているはずですよね? 私は見ていた.mapが、それはそのように動作しません。

4

1 に答える 1

1

jQuery の通常のパターンは次のとおりです。

  • 変更したい要素を見つけて、

  • それらに何かをするメソッドを呼び出します。

他にも多くの方法がありますが、この方法はうまく機能し、ライブラリが機能するように設計されています。そこから離れるには、やむを得ない理由が必要です。（「でも、こういう風にしたい」だけじゃない）

私は次のように書きます：

$('a').click(function() {
    $(this).closest('ul').find('a.active').removeClass('active');
    $(this).addClass('active');
});

チェーンは過大評価されています。2 つのことをしたい場合は、2 行のコードを書いてみてください。あなたはそれが好きかもしれません！

于 2012-09-27T14:55:22.903 に答える