jQuery查找下一個錶行不工作

Question

嗨創建了一個表，它將允許用戶插入多個辦事處號碼和地址相關的每個。即Office One，Office Two等。

我在這些部分之間滑動。我有8個電話號碼，我使用jQuery來隱藏未勾選的電話號碼，點擊「添加新號碼」就會顯示列表中的下一個號碼。

但是，因爲這隻適用於名爲辦公室一而不是辦公室二的部分。如果您可以點擊添加新號碼並在辦公室一和辦公室二中進行測試，您將看到不同之處。我用

的jQuery是如下或查看我的jsFiddle：

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

任何一個知道我怎樣才能使這個通用對下表使用？

在此先感謝

Answer 1

當點擊添加，您要查詢「.contact_numbers：隱藏：第一」，從根。 因此，來自查詢的結果是首先來自辦公室的contact_number，因爲辦公室之一是隱藏的。

在查詢.contact_numbers之前，查詢辦公室二中.contact_numbers的父元素。 而我認爲你不需要使用最接近的顯示元素。

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