代码之家  ›  专栏  ›  技术社区  ›  kevzettler

如何在Jquery UI可选的情况下查找选定元素

  •  15
  • kevzettler  · 技术社区  · 17 年前

    我正在寻找关于jQuery可选事件的事件和ui对象的信息:“选择”和“开始”作为参数。我在文档中找不到这个,在属性中循环也没有帮助。

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

    5 回复  |  直到 10 年前
        1
  •  12
  •   Andy Gaskell    17 年前

    当选择一个元素时,它将获得 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
          }
        });
      }
    });
    
        2
  •  11
  •   Lukspa    15 年前

    您必须使用为组选择中的每个选定项激发的选定和未选定事件。

    var selected = new Array();
    $("#selectable").selectable({
        selected: function(event, ui){            
            selected.push(ui.selected.id);
        },
        unselected: function(event, ui){
            //ui.unselected.id
        }
    });
    
        3
  •  1
  •   Gabber    14 年前

    利用 :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>  
    

    锂 一个id和一个值,从而使 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);
        }
    });
    
        4
  •  0
  •   dez    16 年前

    这将解决您的问题:

        <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 更多信息

        5
  •  -1
  •   broom    14 年前

    该事件中的ui参数是对元素的引用, 如果是所选事件,则ui.selected事件将是元素,如果是unselect unselected.ui….等