Geek asks and answers

JQuery user interface you can choose: snap only to first-generation children

I have a group of items that I want to select.

The jQuery UI Selectable seems to be the right tool, but I run into problems when the functionality seems to be tied to all children with all applicable classes.

I want to make sure that classes and event binding only apply to the first generation of children, and not to their nested elements.

Here's a jsFiddle that should help illustrate what I'm trying to prevent: http://jsfiddle.net/ncKEW/

HTML code

<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 (for illustration only)

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

use the filter parameter .

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

: Fiddle

+11

More articles:


All Articles