jQuery、each循环和复制输入字段

我有一个表单，有多个输入字段，我需要在每个输入字段旁边有一个按钮，该按钮将该字段上的值复制到它旁边的相关字段。虽然这可能真的让人困惑，但这里有一把小提琴来帮助说明我试图实现的目标

上面是我试图在两个输入字段周围向每个div容器添加ID的地方。我认为这是针对我需要的两个目标的最好方式

rowID.each(function () {
    var rowID = $(this);
    $("#row1").find(".copy-btn").click(function () {
        var doppelValue = $("input[id^='edit-doppel-field-und-0-value--']");
        var pristineValue = $("input[id^='edit-field-hub']");
        doppelValue.val(pristineValue.val());
        return false;
    });
});

---

这是我尝试复制值的地方。我遇到的问题是，一个复制按钮复制了第一个输入字段，并将结果插入到其他每个输入字段中。有什么建议吗？

您的html可能会更改吗？最好的方法是简单地遍历dom

$('.copy-btn').on( "click" , function(e) {

  var selector = "[class^=span]";
  var $this = $(this);
  var $first = $this.closest( selector ).prev( selector ).find("input");
  var $second = $this.closest( selector ).next( selector ).find("input");

  $first.val( $second.val() );

  e.preventDefault(e);

});

---

您只需获取上一个输入的值，然后使用

索引将其复制到下一个输入

$(function () {
  $(".copy-btn").click(function () {
    var index = $(":input").index(this);
    var prevInput = $(":input:eq(" + parseInt(index - 1, 10) + ")");
    var nextInput = $(":input:eq(" + parseInt(index + 1, 10) + ")");
    nextInput.val(prevInput.val());
    return false;
  });
});

您的代码问题是，您选择了具有相同id选择器的元素，因此您的查询将返回表单上的所有输入，而不是正确的元素：我更改了您的代码，在JSFIDLE中似乎很好：

$(function () {
var i = 0;
var rowID = $('.row').each(function () {
    i++;
    var newID = 'row' + i;
    $(this).attr('id', newID);

});

rowID.each(function () {
    var rowID = $(this);
    rowID.find(".copy-btn").click(function () {
        var doppelValue = rowID.find("input[id^='edit-doppel-field-und-0-value--']");

        var pristineValue = rowID.find("input[id^='edit-field-hub']");

        doppelValue.val(pristineValue.val());
        return false;
    });
});

您还可以通过为每个
“span-*”
提供另一个类来提高代码的效率，例如：
span第一次输入
和
span第二次输入
等等。。。
[class^=]
选择器相当慢。：）谢谢你指出我愚蠢的错误，现在效果很好！“好”是一个相对的术语；代码中有许多低效之处，不仅仅是重复每个循环，我恳请您检查并选择其他方法之一。。。如果您很难看到差异，只需添加注释，我相信我或其他作者可以对代码行的功能和原因进行注释：）
$(function () {
var i = 0;
var rowID = $('.row').each(function () {
    i++;
    var newID = 'row' + i;
    $(this).attr('id', newID);

});

rowID.each(function () {
    var rowID = $(this);
    rowID.find(".copy-btn").click(function () {
        var doppelValue = rowID.find("input[id^='edit-doppel-field-und-0-value--']");

        var pristineValue = rowID.find("input[id^='edit-field-hub']");

        doppelValue.val(pristineValue.val());
        return false;
    });
});