Interfaccia utente jQuery Selezionabile: associa solo ai bambini di prima generazione

Question

Ho un gruppo di elementi che desidero essere selezionabili.

jQuery UI Selezionabile sembra essere lo strumento giusto, ma mi imbatto in problemi in cui la funzionalità sembra essere legata a tutti gli elementi figlio, con tutte le classi applicate.

Voglio garantire che le classi e l'associazione degli eventi vengano applicate solo alla prima generazione di figli e non ai loro elementi nidificati.

Ecco un jsFiddle che dovrebbe illustrare quello che sto cercando di impedire: http://jsfiddle.net/ncKEW/

Il Codice 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 (solo per l'illustrazione)

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

Answer 1

utilizzare l'opzione filter.

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

Demo: Fiddle