cómo encontrar los elementos seleccionados con Jquery UI seleccionable

Question

Estoy buscando información sobre el evento y los objetos ui los eventos seleccionables de jQuery: "selección" y "inicio" toman como parámetros. No puedo encontrar esto en la documentación y recorrer las propiedades no es de ayuda.

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

Específicamente quiero encontrar qué elementos están siendo seleccionados y comprobar para ver si sus elementos primarios son los mismos o no. Supuse que esto estaría en el objeto ui en algún lugar.

Answer 1

Cuando se selecciona un elemento, se agrega la clase ui-selected.

Así que usted podría conseguir todos los elementos seleccionados con $(".ui-selected")

Esto podría no funcionar exactamente pero creo que la idea sería algo como esto:

$('#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

esto va a resolver su problema:

<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> 

echa un vistazo a http://jqueryui.com/demos/selectable/#serialize para obtener más información

Answer 3

Tiene que usar eventos seleccionados y no seleccionados que se disparan por cada elemento seleccionado en la selección de grupo.

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

Answer 4

el argumento de interfaz de usuario en ese caso es la referencia a la elemenent, caso si fue el evento seleccionado ui.selected será el elemennt, si era unselected.ui deseleccionar ..... etc

Answer 5

mediante el uso de :last o :first la selección no es la primera seleccionada, pero el primero en el orden de li

Ésta es la solución logré:

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> 

En este código le di al li un identificador y un valor, lo que los hace disponibles para la propiedad ui del evento de selección

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); 
    } 
});