jQuery，每个循环和复制输入字段答案

【问题标题】：jQuery, the each loop and copying input fieldsjQuery，每个循环和复制输入字段
【发布时间】：2013-09-06 18:19:34
【问题描述】：

我有一个包含多个输入字段的表单，我需要每个输入字段旁边的一个按钮，它将该字段上的值复制到它旁边的相关字段。虽然这可能真的很令人困惑，但这里的小提琴有助于说明我正在努力实现的目标。

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

});

上面是我尝试将 ID 添加到两个输入字段周围的每个 div 容器的位置。我假设这是针对我需要的两个的最佳方法。

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;
    });
});

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

【问题讨论】：

标签： jquery input each

【解决方案1】：

您可以只获取上一个输入的值，然后使用index 将其复制到下一个输入。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢你指出我的愚蠢错误，现在很好用！
“好”是一个相对术语；代码中有许多低效之处，尤其是冗余的重复循环，我恳请您检查并选择其他方法之一...如果您在看到差异时遇到困难，只需添加评论，我我相信我或其他作者可以评论代码行的作用以及原因:)

【解决方案3】：

你的 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);

});

http://jsfiddle.net/nA37d/240/

【讨论】：

你还可以通过给每个"span-*" 另一个类来提高代码的效率，例如：span-first-input 和span-second-input 之类的……[class^=] 选择器相当慢。 :)