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