Как найти выбранные элементы с JQuery UI по выбору

Question

Я ищу информацию о событии, а объекты ui выбирают события, которые выбираются jQuery: «выбор» и «начало» принимают в качестве параметров. Я не могу найти это в документации, и переходы по свойствам не помогают.

$('#content_td_account').selectable({ 
    filter: 'li:not(".non_draggable")', 
    selecting: function(event, ui) { 
    } 
}); 

В частности, я хочу, чтобы найти то, что элементы выбираются и проверить их, чтобы увидеть, если их родительские элементы являются одинаковыми или нет. Я предположил, что это будет где-то в объекте ui.

Answer 1

Когда элемент выбран, он получает добавленный класс ui-selected.

Таким образом, вы можете получить все выбранные элементы с $(".ui-selected")

Это не может работать точно, но я думаю, что идея будет что-то вроде этого:

$('#content_td_account').selectable({ 
    filter: 'li:not(".non_draggable")', 
    selecting: function(event, ui) { 
    var p = $(this).parent(); 
    $(".ui-selected").each(obj, function() { 
     if(obj.parent() == p) { 
     // get rad 
     } 
    }); 
    } 
}); 

Answer 2

это решит вашу проблему:

<script type="text/javascript"> 
    $(function() { 
     $("#selectable").selectable({ 
      stop: function(){ 
       var result = $("#select-result").empty(); 
       $(".ui-selected", this).each(function(){ 
        var index = $("#selectable li").index(this); 
        result.append(" #" + (index + 1)); 
       }); 
      } 
     }); 
    }); 
    </script> 


<div class="demo"> 

<p id="feedback"> 
You've selected: <span id="select-result">none</span>. 
</p> 

<ol id="selectable"> 
    <li class="ui-widget-content">Item 1</li> 
    <li class="ui-widget-content">Item 2</li> 
    <li class="ui-widget-content">Item 3</li> 
    <li class="ui-widget-content">Item 4</li> 
    <li class="ui-widget-content">Item 5</li> 
    <li class="ui-widget-content">Item 6</li> 
</ol> 

Дополнительная информация http://jqueryui.com/demos/selectable/#serialize

Answer 3

Вы должны использовать выбранное и невыбранное событие, которое запускается для каждого выбранного элемента в группе.

var selected = new Array(); 
$("#selectable").selectable({ 
    selected: function(event, ui){    
     selected.push(ui.selected.id); 
    }, 
    unselected: function(event, ui){ 
     //ui.unselected.id 
    } 
}); 

Answer 4

пользовательский интерфейс аргумент в этом случае является ссылка на elemenent, , если он был выбран событие ui.selected событие будет elemennt, если он был отмените unselected.ui ..... и т.д.

Answer 5

с помощью :last или :first выбор не первый выбран, но первым по порядку li

это решение мне удалось:

HTML-

<ol class="selectable">        
    <li class="ui-widget-content" 
     id="selectable_1" 
     value="1" 
    > First Selectable </li> 
    <li class="ui-widget-content" 
     id="selectable_2" 
     value="2" 
    > Second Selectable </li> 
</ol> 

В этом коде я дал li идентификатор и значение, таким образом, делая их доступными для ui собственности события выбора

JAVASCRIPT

//A place to put the last one 
var last_selected_value; 
var last_selected_id; 


$(".selectable").selectable({ 
    selecting: function(event, ui) { 

     //In the selection event we can know wich is the last one, by getting the id on 
     //the ui.selecting.property 

     last_selected_value = ui.selecting.value; 
     last_selected_id = ui.selecting.id; 
    }, 
    stop: function(event, ui) { 

     //Here the event ends, so that we can remove the selected 
     // class to all but the one we want 

     $(event.target).children('.ui-selected').not("#" + last_selected_id) 
      .removeClass('ui-selected'); 

     //We can also put it on a input hidden 
     $("#roles_hidden").val(last_selected_value); 
    } 
});