как найти выбранные элементы с помощью выбора Jquery UI

Question

Я ищу информацию о событии и объектах пользовательского интерфейса jQuery selectable events: "selection" и "start" принимают в качестве параметров. Я не могу найти это в документации, и просмотр свойств не помогает.

$('#content_td_account').selectable({
    filter: 'li:not(".non_draggable")',
    selecting: function(event, 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

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

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

Answer 3

При использовании :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);
    }
});

Answer 4

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

Answer 5

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

    <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 для получения дополнительной информации