jQuery UI可選：僅綁定到第一代兒童

Question

我有一組要素可供選擇。

jQuery UI可選擇似乎是正確的工具，但我遇到了問題，其中的功能似乎被綁定到所有的子元素，所有的類都被應用。

我想確保事件的類和綁定僅適用於第一代子代，而不是它們的嵌套元素。

這裏有一個的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