jQuery UI Seçilebilir: Yalnızca birinci nesil çocuklara bağlanabilir

Question

Seçilebilir olmak istediğim öğeler grubum var.

jQuery UI Seçilebilir, doğru araç gibi görünüyor, ancak işlevsellik uygulandığında, tüm alt öğelere işlevsellik bağlı gibi görünüyor.

Sınıfların ve olayların bağlanmasının sadece iç içe geçmiş öğelere değil, yalnızca birinci nesil çocuklara uygulanmasını sağlamak istiyorum. http://jsfiddle.net/ncKEW/

Kod 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 (sadece resimde)

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

Css

:

İşte önlemek için çalışıyorum açıklamaya yardımcı gereken bir jsFiddle var

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

Answer 1

filter seçeneğini kullanın.

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

Demo: Fiddle