Question

我现在正在苦苦挣扎一段时间。

我有2个'标签'，第一个标签可见，第二个标签隐藏。

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

首先看看这个小提琴，请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

使用index更新范围

$(".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

Answer 2

另一个选项就是改变你的功能，如下所示。你可以尝试这个应该工作。

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

这是小提琴：fiddle

eq（0）就像选择第0个或第1个元素作为索引

Answer 3

问题是您要将内容添加到div＃tab_2

中的每个范围

您需要使用.eq()

之类的内容单独定位它们

将您的点击处理程序更改为：

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

jQuery .each先添加第二个值等

3 个答案: