admin管理员组文章数量:1331443
I have a group of elements which I want to be selectable.
jQuery UI Selectable seems to be the right tool, but I run into problems where the functionality seems to be bound to all of the child elements, with all the classes being applied.
I want to ensure that the classes and binding of events is only applied to the first generation of children, and not their nested elements.
Here's a jsFiddle which should help illustrate what I'm trying to prevent: /
The Code 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 (just for illustration)
#group{padding: 12px;}
h2{font-size: 1.2em;margin: 2px 0;}
.unit{background: blue;}
.ui-selected{background: yellow;}
I have a group of elements which I want to be selectable.
jQuery UI Selectable seems to be the right tool, but I run into problems where the functionality seems to be bound to all of the child elements, with all the classes being applied.
I want to ensure that the classes and binding of events is only applied to the first generation of children, and not their nested elements.
Here's a jsFiddle which should help illustrate what I'm trying to prevent: http://jsfiddle/ncKEW/
The Code 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 (just for illustration)
#group{padding: 12px;}
h2{font-size: 1.2em;margin: 2px 0;}
.unit{background: blue;}
.ui-selected{background: yellow;}
Share
asked Apr 26, 2013 at 10:56
daveyfahertydaveyfaherty
4,6132 gold badges28 silver badges42 bronze badges
1
- Maybe I am too stupid, but I don't understand the problem... – Christian Commented Apr 26, 2013 at 11:11
1 Answer
Reset to default 12use the filter option.
$(document).ready(function(){
$('#group').selectable({
filter: " > div"
});
});
Demo: Fiddle
本文标签: javascriptjQuery UI Selectable Bind to firstgeneration children onlyStack Overflow
版权声明:本文标题:javascript - jQuery UI Selectable: Bind to first-generation children only - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742262788a2442829.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论