jquery - .siblings() 的替代品

Question

我可以使用什么来替代.siblings()jQuery 中的方法来遍历特定类的 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');
    }
});

这是jsfiddle 的链接

Answer 2

可能这可能会有所帮助：

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