javascript - jQuery UI 可选 : Bind to first-generation children only

Question

我有一组可供选择的元素。

jQuery UI Selectable 似乎是正确的工具，但我遇到了问题，功能似乎绑定(bind)到所有子元素，并应用了所有类。

我想确保事件的类和绑定(bind)只应用于第一代子代，而不是它们的嵌套元素。

这是一个 jsFiddle，它应该有助于说明我试图阻止的事情:http://jsfiddle.net/ncKEW/

守则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(仅供说明)

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

Answer 1

使用filter选项。

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

演示:Fiddle