I'm trying to exclude the <div> children from being selected within this list item and only select the entire <li>.
The structure of the HTML is as follows:
<ul id="selectable">
<li>
<div id="1"></div>
<div id="2"></div>
</li>
<li>
<div id="1"></div>
<div id="2"></div>
</li>
...
</ul>
The jQuery code I have been using is:
var foo = $('#selectable').selectable({
filter: " > div"
});
However, it doesn't seem to be working correctly. Without any filtering, the <div>s inside the list items are getting selected, particularly the <div> with the id=2 that is outside the container. This is causing an issue! Here's a screenshot for better understanding:
Do you see how even the "About" text is being selected? How can I resolve this problem?