Только открывать ближайший модальный к кнопке

Question

У меня есть страница, в которой есть случайное количество элементов, каждая из которых имеет кнопку и модальную - поскольку я не знаю, сколько предметов я буду использовать классы для кнопки и модальные ,

Когда я нажимаю любую кнопку, он загружает все модалы, тогда как я хочу, чтобы он загружал следующий модальный - я пытался использовать ближайший и следующий, но не могу заставить их стрелять.

<div class="social-button-container"> 
    <button type="button" class="social-button">Button</button> 
</div> 

<div class="socialModal modal fade"> 
    <h2>123</h2> 
</div> 

<div class="social-button-container"> 
    <button type="button" class="social-button">Button2</button> 
</div> 

<div class="socialModal modal fade"> 
    <h2>234</h2> 
</div> 

$(document).ready(function() { 
    $('.social-button').click(function() { 
     $('.socialModal').modal(); 
     return false; 
    }); 
}); 

Приведенный выше код работает в том, что огонь модальности, но все они делают - я попытался с помощью:

$(document).ready(function() { 
    $('.social-button').click(function() { 
     $('.socialModal').next().modal(); 
     return false; 
    }); 
}); 

, но это не делает вообще ничего (нет огня)

также попытался:

$(document).ready(function() { 
    $('.social-button').click(function() { 
     $(this).next('.socialModal').modal(); 
     return false; 
    }); 
}); 

с таким же результатом - как я могу получить только следующий модальный, чтобы открыть, нажав соответствующую кнопку?

http://jsfiddle.net/0v0pg7fx/

Answer 1

Ваши селекторы были немного прочь, и вы, вероятно, хотите, чтобы в инициализировать модальности первым.

$('.socialModal').modal({show:false}); 

$('.social-button').click(function() { 
    $(this).closest('.social-button-container').next('.socialModal').modal('show'); 
}); 

Demo

Answer 2

$(document).ready(function() { 
          $('.button').click(function() { 
           $('.Modal').closest().modal(); 
           return false; 
          }); 
         });