javascript - jQuery .each 首先附加第二个值等

Question

我现在为此苦苦挣扎了一段时间。

我有 2 个“选项卡”，第一个选项卡可见，第二个选项卡隐藏。

我需要的是，当我添加更多选择元素并有机会选择该元素的值并单击“下一步”时，我需要添加到第一个“内容:”值为“Foo”和第二个“内容:例如''酒吧'。但现在我每次都得到“Content: Foo Bar”和“Content: Foo Bar”。

请先看看这个 fiddle Click here

这是我的 HTML:

<div id="tab1">
    <p>
        <select>
            <option>Foo</option>
            <option>Bar</option>
        </select>
    </p>
    <a href="#" class="add">add</a>
    <input type="button" value="next" class="next add_content" />
</div>

<div id="tab2">
    <p>Content: <span></span></p>
    <input type="button" value="prev" class="prev" />
</div>

这是我的 jQuery:

$(".next").click(function(){
    $(this).parent().hide();
    $(this).parent().next().show();
});

$(".prev").click(function(){
    $(this).parent().hide();
    $(this).parent().prev().show();
});

$("a.add").click(function(){
    var row = $("#tab1").children("p").first().clone();
    var row2 = $("#tab2").children("p").first().clone();

    row.insertBefore(this);
    row2.insertAfter("#tab2 p:last");

    return false;
});

$(".add_content").click(function() {
    $("#tab1 select option:selected").each(function() {
       var content = $(this).val();
        $("#tab2 p span").append(content + " ");
    });
});

Answer 1

使用索引更新span

$(".add_content").click(function () {
    var spans = $("#tab2 p span");
    $("#tab1 select option:selected").each(function (i) {
        var content = $(this).val();
        spans.eq(i).text(content); // as suggested by @RaphaëlAlthaus
    });
});

演示:Fiddle