Альтернатива .siblings()

Question

Что я использую в качестве альтернативы методу .siblings() в JQuery, чтобы пройти через дивы определенного класса, но в отдельных контейнерах Див За то, как это работает:

HTML:

<div id="container1"> 
    <div id="1"></div> 
</div> 

<div id="container2"> 
    <div id="2"></div> 
</div> 

JS:

$('#1').addClass('selected'); 

$('.selected').on('click',function() { 
    alert('hi'); 
}); 

$('#2').addClass('selectable'); 

$('.selectable').on('click',function() { 
    $(this).addClass('selected') 
      .removeClass('selectable') 
      .siblings('.selected') 
      .off('click'); 
}); 

Answer 1

Может быть, это может помочь:

$('.selectable').on('click',function() { 
    $(this).addClass('selected') 
      .removeClass('selectable') 
      .parent() 
      .siblings() 
      .children() 
      .off('click'); 
}); 

Answer 2

Я бы кодировать этот другой путь:

EDIT:

$('#1').addClass('selected'); 
$('#2').addClass('selectable'); 

var $outerContainer = $('#container1').parent(); 
$outerContainer.on('click','.selected,.selectable', function(event) { 
    if ($(event.target).is(".selected")) { 
     alert('hi'); 
    } else {  // .selectable 
     $('.selected', $outerContainer) 
      .removeClass('selected') 
      .addClass('selectable'); 
     $(event.target) 
      .addClass('selected') 
      .removeClass('selectable'); 
    } 
}); 

Вот link to jsfiddle