jQuery UI選択可能：第一世代の子供にのみバインド

Question

私は選択可能な要素のグループを持っています。

jQuery UI Selectableは適切なツールのようですが、すべてのクラスが適用された状態で、すべての子要素に機能が割り当てられているような問題が発生します。

イベントのクラスとバインディングは、ネストされた要素ではなく、第1世代の子にのみ適用されます。ここで

は私が予防しようとしているものを説明するのに役立つはずですjsFiddleです：http://jsfiddle.net/ncKEW/

コード HTML

<div id="group"> 
    <div class="unit"> 
     <h2>Title</h2> 
     <div class="content"> 
      Dulce et decorum 
     </div> 
    </div> 
    <div class="unit"> 
     <h2>Title</h2> 
     <div class="content"> 
      Dulce et decorum 
     </div> 
    </div> 
    <div class="unit"> 
     <h2>Title</h2> 
     <div class="content"> 
      Dulce et decorum 
     </div> 
    </div> 
    <div class="unit"> 
     <h2>Title</h2> 
     <div class="content"> 
      Dulce et decorum 
     </div> 
    </div> </div> 

JS

$(document).ready(function(){ 
    $('#group').selectable(); 
}); 

のCss（単なるイラスト用）

#group{padding: 12px;} 
h2{font-size: 1.2em;margin: 2px 0;} 
.unit{background: blue;} 
.ui-selected{background: yellow;} 

Answer 1

filterオプションを使用します。

$(document).ready(function(){ 
    $('#group').selectable({ 
     filter: " > div" 
    }); 
}); 

デモ：Fiddle