jQuery UI Wählbar: Nur an Kinder der ersten Generation binden

Question

Ich habe eine Gruppe von Elementen, die ich auswählen möchte.

jQuery UI Wählbar scheint das richtige Werkzeug zu sein, aber ich stoße auf Probleme, bei denen die Funktionalität an alle untergeordneten Elemente gebunden zu sein scheint und alle Klassen angewendet werden.

Ich möchte sicherstellen, dass die Klassen und die Bindung von Ereignissen nur für die erste Generation von untergeordneten Elementen und nicht für ihre verschachtelten Elemente angewendet wird.

Hier ist ein jsFiddle die illustrieren sollen helfen, was ich versuche zu verhindern: http://jsfiddle.net/ncKEW/

Der Kodex 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 (nur für Illustration)

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

Answer 1

Verwenden Sie die Option filter.

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

Demo: Fiddle