Jquery UIで選択した要素を選択する方法

Question

jQueryの選択可能なイベント：「選択」および「開始」がパラメータとして取られるイベントおよび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

それは.....などunselected.uiの選択を解除した場合は、選択したイベントui.selectedイベントは、elemenntになりました場合は、そのイベントのUI引数がelemenent、 への参照です

選択 :lastまたは :firstを使用することにより

Answer 5

はli

これは私が管理ソリューションであるの順に選択した最初のが、最初ではありません。

HTML私はli IDと値、従って選択イベント

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