jquery selectable插件来选择第一级孩子，而不是孩子的孩子

问题描述：

<ol id="selectable"> 
    <li class="ui-widget-content"> 
      <div><input type="checkbox" /></div> 
      <div>Item1</div> 
      <div>Khanput</div> 
      <div>1/2/3</div> 
      <div>15:03:16</div> 
      <div>--------</div> 
      <div>23m</div> 
      <div>Chakwal</div> 
     </li> 
    </ol>

我只想选择'li'元素而不是'div'，但它会选择它们全部。我已经尝试了一些东西，但他们没有解决。jquery selectable插件来选择第一级孩子，而不是孩子的孩子

你能链接到的你是什么样的例子解试图实现？不是每个对你的问题感兴趣的人都知道jQuery-ui可选择的是什么。 –

（单独的问题）你没有提供任何JS与你的HTML。有一些与它一起吗？ –

答

如果您将<li>元素设置为可选，则可以认为单击<li>时，其内容中的内容也会变为“已选中”。

就jQuery UI而言，只有<li>实际上是“选中”的。你可以看到这个，因为你的<li>在被选中时会被赋予一个ui-selected的等级;相反，其内容是ui-selectee类。

答

您可以添加此定制插件

$.widget("xim.singleSelectable", { 
    options: { 
     select: null 
    }, 
    _create: function() { 
     var self = this; 
     this.element.addClass('ui-selectable'); 
     this.element.delegate('li', 'click', function (e) { 
      self.element.find('>li').removeClass('ui-selected'); 
      $(this).addClass('ui-selected'); 

      if ($.isFunction(self.options.select)) { 
       self.options.select.apply(self.element, [e, this]); 
      } 

     }); 
    }, 
    selected: function() { 
     return this.element.find('li.ui-selected'); 
    }, 
    destroy: function() { 
     $.Widget.prototype.destroy.apply(this, arguments); // default destroy 
    } 
});

那么你的代码将

$("#selectable").selectable({   
      stop: function() {     
       $("li.ui-selected", this).each(function() { 
        var index = $("#selectable li").index(this);     
        alert(index);          
       });     
      }       
     });

我发现这里 How to prevent multiple selection in jQuery UI Selectable plugin

jquery selectable插件来选择第一级孩子，而不是孩子的孩子

相关推荐