Скрыть кнопки Когда все Divs Видимы

Question

У меня есть следующий HTML:

<div class="persons"> 
    <div class="per1"></div> 
    <div class="per2"></div> 
    <div class="per3"></div> 
    <div class="per4"></div> 
    <div class="per5"></div> 
    <div class="per6"></div> 
    <div class="per7"></div> 
    <div class="per8"></div> 
    <div class="per9"></div> 
    <div class="per10"></div> 
</div> 

<a id="add-person" href="#" class="button brand">Add Person Involved</a> 

Все, кроме первого DIV (per1) скрыты по умолчанию.

Затем со следующим JS я могу показать следующий div, если человек нажимает кнопку.

$("#add-person").click(function(){ 
    if ($(".persons div:visible").next().length != 0){ 
     $(".persons div:visible").next().slideDown('slow'); 
    } 
    return false; 
}); 

Это работает, но мой вопрос, как только десятый ДИВ становится видимым Я хочу кнопка Add Person Involved быть скрыта.

Я попытался добавить следующий код в функции выше щелчка, но он не работает:

if ($(".persons div:visible").length === 10){ 
    $("#add-person").hide(); 
} 

Как скрыть кнопку один раз 10 DIV (ака class="per10") становится видимым?

Answer 1

вы можете проверить: скрытый после виден ДИВ

if ($(".persons div:hidden").length == 0){ 
    $("#add-person").hide(); 
} 

и вы можете попробовать использовать :last() видимыми и проверить is("hidden") на следующий DIV

$("#add-person").click(function(){ 
    if ($(".persons div:visible:last").next().is(':hidden')){ 
     $(".persons div:visible:last").next().slideDown('slow' , function(){ 
      if ($(".persons div:hidden").length == 0){ 
       $("#add-person").hide(); 
      } 
     }); 
    } 
}); 

Working Demo

и вместо использования в css

.per2, .per3, .per4, .per5, .per6, .per7, .per8, .per9, .per10{ 
    display:none; 
} 

вы можете использовать

.persons > div{ 
    display : none; 
} 

или

.persons > div[class^="per"]{ // this mean div with class starts with per 
    display : none; 
}