1

私はこれに似たレイアウトを持っています：

<li class="item">
  <div class="data">
    <div class="pics">
      <div class="pic"></div>
      <div class="pic"></div>
      <div class="pic"></div>
      <div class="btns">
        <div class="btn 1"></div>
        <div class="btn 2"></div>
      </div>
    </div>
  </div>
  <input type="hidden" value="" name="">
  <input type="hidden" value="" name="">
  <input type="hidden" value="" name="">
  <input type="hidden" value="" name="">
</li>

私がやりたい<li>のは、ボタンの1つ class="btn"がクリックされたときからすべての入力要素を取得することです。私がこれにアプローチした方法は、基本的<li>にボタンの親をつかんで、<input>要素を選択することです...

var inputs = $($(element).parents('.item')[0]).children('input');

...elementクリックされているボタンの1つはどこですか。

このアプローチは私が望むことをしているようですが、これを行うためのより良い方法はありますか？かなり非効率に思えますが、パフォーマンスに関する指標を確実に把握することはできません。何か考えや提案はありますか？

アップデート

オプションをテストするためにjsPerfにアクセスしました：http：//jsperf.com/jq-select。closest()私が持っているものは、私が推測していなかったものを使用するよりも速いようです。

4

3 に答える 3

3

jQuery関数を2回呼び出す必要はありません-使用できますclosest

$(element).closest('.item').children('input');
于 2013-02-22T01:11:47.070 に答える
3

あなたは試すことができますclosest：

element.closest('.item').children('input');

最初の試合で止まります。

于 2013-02-22T01:12:03.453 に答える
1

親から開始するので、これはもう少し便利だと思います。

$('li').has(this).find('input')

パフォーマンス： http： //jsperf.com/jquery-closest-vs-has —最高のパフォーマンスはキャッシュから得られることに注意してください$('li')。

しかし、本当にパフォーマンスを確認したい場合は、http：//jsperf.com/jq-select/3で独自のJSPerfを、キャッシュli has/childrenアプローチ（自分よりも約33％高速）とDOMのみのバージョンの両方で拡張しました。したがって、湾が実際にどれほど大きいかを確認できます（実際には最適化されていませんが、7800％高速です！）。

これは、速度が本当に重要な場合はDOMを使用するという前提を強調しています。JQueryを使用している場合は、最も便利で使いやすい式を選択してください。

ここに画像の説明を入力してください

于 2013-02-22T01:28:17.777 に答える