获取每个div onClick - JQuery的每个输入

时间:2013-09-29 19:13:53

标签: jquery html each

如何将div中的每个()输入值转换为每个() div onClick的innerHTML?我想使用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/

解决方案 我去了(由杰克逊提供,但没有find()函数),这允许我获得所有输入并将它们转储到预览选项卡:

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

2 个答案:

答案 0 :(得分:2)

这不使用each(),但它基本上做同样的事情。 (此外,JS中的for循环更快。)

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

答案 1 :(得分:0)

那样的东西?

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

一些建议:

1)避免使用带方括号的id属性

2)使用example作为精湛的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();
    }
});