2

以下のような HTML コードがあるとします。

<div class="body">
    <div class="head">xxx</div>
    <div class="menu">xxx</div>
    <div class="content">
        <div class="main">xxx</div>
    </div>
</div>

スクリプト A

$('.body')
  .find('.head').show().end()
  .find('.menu').show().end()
  .find('.content .main').show().end()

スクリプト B

$('.body .head').show()
$('.body .menu').show()
$('.body .content .main').show()

すべての要素を表示するスクリプトAとBを作成しましたが、どちらが優れているか、またはそれぞれの利点は何ですか?

4

3 に答える 3

3

それは主観的なもので、end読みにくいと思う人もいるかもしれません。
正解も不正解もありません。

キャッシング スタイルの方が読みやすく、さらに高速であるため、私はキャッシング スタイルを好みます。

スクリプト C

var $body = $('.body');
$body.find('.head').show();
$body.find('.menu').show();
$body.find('.content .main').show();

ご了承ください：

$body.find('.head').show();
$body.find('.menu').show();

次のように短縮して組み合わせることができます。

$body.find('.head, .menu').show();

end() メソッドは、主に jQuery のチェーン プロパティを利用する場合に役立ちます。チェーンを使用しない場合、通常は変数名で前のオブジェクトを呼び出すだけでよいため、スタックを操作する必要はありません。ただし、end() を使用すると、すべてのメソッド呼び出しをつなぎ合わせることができます。

ドキュメントから

于 2013-04-16T06:43:05.623 に答える
3

内に他の要素がない場合は、 orを.body呼び出すだけです。.show().hide().body

$('.body').show();

または、.bodydiv の子の一部だけがある場合は、1 行だけ記述できます。

$('.body').find('.head,.menu,.content .main').show();

// or provide the second parameter as the context
$('.head,.menu,.content .main', '.body').show();
于 2013-04-16T06:46:50.483 に答える
2

$('.body')ここでは、変数内に格納するか、 を使用して、 の値をキャッシュすることをお勧めします.end()。

このコードは、単一の 内で'.head'とセレクターも結合します。'.menu'.find()

$('.body')
    .find('.head,.menu')
        .show()
        .end()
    .find('.content .main')
        .show();

これは、オプション A よりも最大 5% 遅いことがわかります。

もちろん、ネイティブに移行してquerySelectorAll()直接使用することもできます:

[].forEach.call(document.body.querySelectorAll('.head, .menu, .content .main'), function(node) {
    node.style.display = 'block';
});

これはすべてのブラウザーで機能するわけではありませんが、パフォーマンスが大幅に向上します。

jsperf の結果

于 2013-04-16T06:44:45.257 に答える