.siblings()的替代方法

Question

在jQuery中，为了在单独的div容器中遍历特定类的div，我应该使用什么替代.siblings()方法呢？

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

我会用一种不同的方式来编码：

编辑：

$('#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');
    }
});

这是一个