jQueryを使用した効率的なコピーダウン

Question

ユーザーがselectの値を変更すると、選択された値が他の同様の選択（同じCSSクラス）にコピーされます。彼らはすでに価値がありません。以下を行うより効率的な方法がありますか？少なくともIE7ではちょっと動かない。

$('.selectclass').change(function() { 
    if ($(this).val() != '') { 
    var baseElem = $(this); 
    $('.selectclass:gt(' + $('.selectclass').index(this) + ')').each(function (i) { 
     if ($(this).val() == '') { 
     $(this).val(baseElem.val()); 
    } 
    }); 
    } 
}); 

Answer 1

これは、より良い最適化する必要があります。

$('input.selectclass').change(function(){ 
    if (this.value !== '') { 
     var newVal = this.value, 
      boxes = $('input.selectclass'); 

     boxes.slice(boxes.index(this)).val(function(i, oldVal) { 
      return oldVal === '' ? newVal : oldVal; 
     }); 
    } 
}); 

NBこれはテストされていません。あなたはそれがより簡単に試験することができる（例えばjsfiddle）HTMLのサンプルを提供することができれば...ここに作ら

効率：

• をinput.selectclassを使用して、特にInternet Explorerの
• で、.selectclassよりも高速でなければなりませんそれはthis.valueを用いなく
• 新しいjQueryのインスタンスを作成valの作り付けのコールバックシグネチャを使用してではなく、目をやっ
• セレクタをキャッシュするのではなく再利用しますe手動でループするeach。

Answer 2

これらはすべて同じクラスなので、foreachが必要ですか？

$('.selectclass').change(function() { 
$('.selectclass').val($(this).val()) 
} 

Answer 3

$('.selectclass').change(function() { 
    if ($(this).val() != '') { 
    $('.selectclass:gt(' + $('.selectclass').index(this) + ')').not(':empty').val($(this).val()) 
    } 
}); 

Answer 4

あなたは<select>要素ツリーの下の次の兄弟を一致させるためにnextAll()を使用することができます。

$(".selectclass").change(function() { 
    var origin = $(this); 
    var value = origin.val(); 
    if (value !== "") { 
     origin.nextAll(".selectclass").each(function() { 
      var $this = $(this); 
      if ($this.val() === "") { 
       $this.val(value); 
      } 
     }); 
    } 
});