jQuery发现接下来没有使用div结构

Question

嗨创建了一个div结构，允许用户插入多个与每个相关的办公室号码和地址。 即Office One，Office Two等

我在这些部分之间进行了滑动。 我有8个电话号码，我使用jQuery隐藏未勾选的电话号码，点击“添加新号码”，它将显示列表中的下一个号码。

但是，这仅适用于名为office one的部分，而不是office 2。 如果你能够点击添加新号码并在办公室1和办公室2上进行测试，你会看到差异。 单击添加按钮时，它还应附加隐藏和清除链接，但这不会附加。

我的添加功能如下或查看我的jsFiddle

$(".add").click(function () {
 $(this).closest('.togglesettings').find(".contact_numbers:hidden:first").fadeIn("slow", function () {
             $(this).find('.remove').remove();
                 $(this).find('.clearnumber').remove();
                 $(this).find('.contact_numbers .input_tel:last-child').append("<a href='#' class='remove'>Hide</a><a href='#' class='clearnumber'> Clear #</a>")
            });
    });

然而，当我使用表结构时，这可以工作，单击该jsFiddle

Answer 1

在添加点击处理程序中，更改：

$(this).closest('.togglesettings').find(...

至

$(this).closest('.form-group.container').find(...

jsFiddle例子

Answer 2

.togglesettings包装了两个电话列表，一个是你得到第一个隐藏的（.contact_numbers：hidden：first），所以你从第一个列表中获得一个电话（直到所有这些电话都没有被隐藏）。 所以改变：

$(this).closest('.togglesettings').find(... 

喜欢的东西

$(this).closest('.ten.columns').find(...