獲取每個輸入到每個div onClick - jQuery

Question

如何獲取每個（） div內的輸入值轉化爲innerHTML each（） div onClick？我想使用each（）或類似的東西，因爲我需要將這個擴展到多個標籤和行，這是我迄今爲止所做的。

事件觸發：

<input type='radio' name='tab' id='tab1'> 
<label for='tab1'>Tab 1</label> 

輸入：

<div class='row' id='tab1-container'> 
    <div class='cell'> 
     <input type='text'> 
    </div> 
    <div class='cell'> 
     <input type='text'> 
    </div> 
    <div class='cell'> 
     <input type='date'> 
    </div> 
</div> 

輸出：

<div class='row' id='preview1'> 
    <div class='cell'></div> 
    <div class='cell'></div> 
    <div class='cell'></div> 
</div> 

JQuery的：

$(document).on("click", "#tab1", function() { 
    $(function() { 
     $('#tab1-container .cell input').each(function() { 
      input = $(this).val(); 
      $('#preview1 .cell').html(input); 
     }); 
    }); 
}); 

學習JQuery，我在這裏做錯了什麼？ 看到我的jsfiddle：http://jsfiddle.net/GSnqR/7/

解決方案 我去（傑克遜的禮貌，但沒有找到（）函數），這可以讓我所有輸入和甩掉他們上預覽標籤：

$(document).on('click', '.tab', function() { 
    var inputs = $('.tab-container .cell input'); 
    var outputs = $('.preview .cell'); 
    for (var i = 0; i < inputs.length; i += 1) { 
     var value = $(inputs[i]).val(); 
     $(outputs[i]).html(value); 
    } 
}); 

Answer 1

這不使用each()，但它基本上是一樣的東西。 （另外，for環路的方式更快JS）

var inputs = $('#tab1-container .cell input'); 
var outputs = $('#preview1 .cell'); 
$('#tab1').on('click', function() { 
    for (var i = 0; i < inputs.length; i += 1) { 
     var value = $(inputs[i]).val(); 
     $(outputs[i]).html(value); 
    } 
}); 

小提琴：http://jsfiddle.net/EdqxG/1/

如果你想擴展這個到的不僅僅是「TAB1」多標籤的工作......

$(document).on('click', '.tab', function() { 
    var $this = $(this); 
    var inputs = $this.find('.tab-container .cell input'); 
    var outputs = $this.find('.preview .cell'); 
    for (var i = 0; i < inputs.length; i += 1) { 
     var value = $(inputs[i]).val(); 
     $(outputs[i]).html(value); 
    } 
}); 

Answer 2

這樣的事情？

http://jsfiddle.net/pmcalabrese/U6tQQ/

一些建議：

1）避免id屬性用方括號

2）使用例如作爲開始從精湛的jQuery的文檔

$(document).on("click", "#tab1", function() { 
    elements = $('#preview0 .cell'); 
    $(function() { 
     $('#tab1-container .cell input').each(function (index) { 
      input = $(this).val(); 
      $(elements[index]).html(input); 
     }); 
    }); 
}); 


$(".row .cell input").on('keyup change', function() { 
    if ($(this).val().length == 0) { 
     //At least one input is empty 
     $(this).parent().siblings().children("button").hide(); 
    } else { 
     $(this).parent().siblings().children("button").show(); 
    } 
});