Giao diện người dùng jQuery Có thể chọn: Chỉ liên kết với trẻ em thế hệ thứ nhất

Question

Tôi có một nhóm các thành phần mà tôi muốn có thể chọn được.

jQuery UI Có thể chọn có vẻ là công cụ phù hợp, nhưng tôi gặp phải các vấn đề mà chức năng dường như bị ràng buộc với tất cả các phần tử con, với tất cả các lớp đang được áp dụng.

Tôi muốn đảm bảo rằng các lớp và sự ràng buộc của các sự kiện chỉ được áp dụng cho thế hệ con đầu tiên, chứ không áp dụng cho các phần tử lồng nhau của chúng.

Dưới đây là một jsFiddle mà nên giúp minh họa những gì tôi đang cố gắng để ngăn chặn: http://jsfiddle.net/ncKEW/

Bộ luật 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 (chỉ mang tính minh họa)

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

Answer 1

sử dụng tùy chọn filter.

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

Demo: Fiddle