jQuery UI Do wyboru: przywiąż do pierwszej generacji tylko dzieci

Question

Mam grupę elementów, które chcę wybrać.

jQuery UI Wybieralny wydaje się być właściwym narzędziem, ale napotykam na problemy, w których funkcjonalność wydaje się być związana z wszystkimi elementami podrzędnymi, z wszystkimi zastosowanymi klasami.

Chcę zapewnić, że klasy i powiązanie zdarzeń jest stosowane tylko do pierwszej generacji dzieci, a nie ich elementy zagnieżdżone.

Oto jsFiddle które powinny pomóc zilustrować to, co staram się zapobiec: http://jsfiddle.net/ncKEW/

Kodeks 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 (tylko dla ilustracji)

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

Answer 1

użyj opcji filter.

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

Demo: Fiddle