使用jQuery进行高效复制

我有一段jQuery代码，当用户更改select的值时，它将选中的值复制到其他类似的选择（相同的CSS类），后面跟着一个更改，如果他们已经没有价值了。有没有更有效的方法来做到以下几点？它运行有点缓慢，至少在IE7中。使用jQuery进行高效复制

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

来源

2011-02-28 GriffeyDog

这应该得到更好的优化：

$('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这是未经测试。如果你能提供一个HTML样本（如的jsfiddle）可能更容易测试......

此处的效率：

使用input.selectclass应该比.selectclass快，特别是在Internet Explorer
缓存的选择，而不是重新使用它
使用this.value而不是使用的val内置的回调签名创建一个新的jQuery实例
，而不是做日用each手动循环。

来源

2011-02-28 22:25:41 lonesomeday

“this.value”是否适用于“select”元素？ – GriffeyDog

@GriffeyDog [是]（http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59351919） – lonesomeday

确实提高了性能。谢谢。 – GriffeyDog

因为他们都是同一个班级，你需要一个foreach吗？

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

来源

2011-02-28 22:24:20 RandomWebGuy

的变化只应该影响*以后*的情况下，不是所有的页面上。 – Pointy

@Pointy这是正确的 – GriffeyDog

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

来源

2011-02-28 22:28:09 FatherStorm

注意：未经测试。 – FatherStorm

感谢您的建议。我将在明天回到工作岗位时进行调查。 – GriffeyDog

您可以使用nextAll()到<select>元素相匹配的下一个同级树倒：

$(".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); 
      } 
     }); 
    } 
});

来源

2011-02-28 22:42:47

感谢您的建议。我将在明天回到工作岗位时进行调查。 – GriffeyDog

使用jQuery进行高效复制

回答

相关问题