替代.siblings（）

Question

我可以使用什么作为jQuery中.siblings()方法的替代方法来遍历特定类的div但是在单独的div容器中？对于这样的东西起作用：

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

我以不同的方式编码：

修改

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

Answer 2

这可能会有所帮助：

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