放置div时，JQuery反转多个选择框中的所选选项不起作用

Question

首先请原谅我的英语，我不是母语。 我有一个很奇怪的问题。 我有以下两个多重选择框：

<select id="leftEntities" class="width390px" multiple="multiple" size="8">
   <option value="1">Option A</option>
   <option value="2">Option B</option>
</select>

<select id="rightEntities" class="width390px" multiple="multiple" size="8">
   <option value="1">Option C</option>
   <option value="2">Option D</option>
</select>

和此按钮，应反转所选选项。

<button id="invert" class="btn btn-primary glyphicon glyphicon-transfer"></button>

这是JQuery代码：

$(document).ready(function(){
   $('#invert').click(function() {
   SWAPLIST.invert($(this).parent().find('select'));
   });
});

var SWAPLIST = {};
SWAPLIST.invert = function(list) {
   $(list)
   .children()
   .prop('selected', function(i, selected) {
      return !selected;
   });
}

问题是，当按钮周围没有div容器时，它的工作方式应该像它应该工作的那样，但是如果我在它周围放一个，它就不再起作用。

换句话说，这是行不通的：

<div class="sometestclass">
   <button id="invert" class="btn btn-primary glyphicon glyphicon-transfer"></button>
</div>

Answer 1

如果$(this).parent()不是选择项的父项，则它将不起作用

试试这个

现场演示

SWAPLIST.invert($("select.width390px"));

要么

SWAPLIST.invert($("select[id$='Entities']"));

完整解决方案

$(function(){
  $('#invert').on("click",function() {
    SWAPLIST.invert($("select[id$='Entities']"));
  });
});

Answer 2

这是因为$(this).parent()指向此DIV 。 使用$(this).parent().parent()或其他选择器。

Answer 3

其背后的问题是：您已经使用过： $(this).parent() 。 在许多情况下，这将无法满足您的要求，因此会导致失败。

但是，最好使用在HTML标记中添加的select classes ，如下所示：

$(document).ready(function(){
   $('#invert').click(function() {
       console.log($("select.width390px"));
       //SWAPLIST.invert($(this).parent().find('select'));
       SWAPLIST.invert($("select.width390px"));
   });
});

在此处找到有效的小提琴： http : //jsfiddle.net/2ceUC/1/

Answer 4

使用$(this)按钮。 然后使用parent()转到父级。 然后使用find() ，您正在寻找一些元素。

但是，如果button周围有div ，则父级将为div 。 从那里开始， find将失败。

Answer 5

TRy http://jsfiddle.net/5jb3P/

您不能选择父级，因为父级现在是<div>

因此，您应该通过选择或元素ID来访问它

喜欢

$('select') or $('#leftEntities,#rightEntities')