jquery ui selectable: manually/programmatically selecting child

Question

Possible Duplicate:
How to programmatically select selectables with jQuery UI?

Does anyone know how to manually or programmatically select a child item of a jQuery UI selectable?

Indigenuity · Accepted Answer · 2012-11-11T00:42:26.513

2

This isn't exclusive to a selectable object, but if you just want to get the html node, you can use the :nth-child() selector found here.

$(".selector li:nth-child(2)")

Depending on what you need to do with this child, this may work for you.

EDIT

I think I missed your intended meaning of 'select'. I don't immediately see an easy way to use the API to select an item, but you could always just add the class ui-selected to a child item and the css should take care of the rest. This probably won't trigger API events, however.

Or, you could just do

$(".selector li:nth-child(2)").click();

to select with a fake mouse click.

edited Nov 11 '12 at 00:42

answered Nov 11 '12 at 00:35

Indigenuity

9,332
6
39
68

Thanks for response. Adding the class ui-selected is a start. Even though events do not fire, I still have enough context to decide what needs to be done. I tried calling click on my selector which looks like this $('#stop_1111') but did not get desired effect. – Klaus Nji Nov 11 '12 at 01:56

score 0 · Answer 2 · edited May 23 '17 at 11:45

From my answer to this question...

http://jsfiddle.net/XYJEN/1/

function SelectSelectableElements (selectableContainer, elementsToSelect)
{
    // add unselecting class to all elements in the styleboard canvas except the ones to select
    $(".ui-selected", selectableContainer).not(elementsToSelect).removeClass("ui-selected").addClass("ui-unselecting");

    // add ui-selecting class to the elements to select
    $(elementsToSelect).not(".ui-selected").addClass("ui-selecting");

    // trigger the mouse stop event (this will select all .ui-selecting elements, and deselect all .ui-unselecting elements)
    selectableContainer.data("selectable")._mouseStop(null);
}

jquery ui selectable: manually/programmatically selecting child

2 Answers2