javascript - 通过 JQuery 在多个选择框中反转所选选项在放置 div 时不起作用

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() 不是 select 的父级，那么它不会工作

试试这个

Live Demo

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

或

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

完整的解决方案

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