如何使用jQuery在前一个元素之前插入元素？

Question

我有一个带有一些隐藏选项和两个按钮（上下）的选择框。为了隐藏选项，我必须将它们包裹在不可见的span中，因为在某些浏览器中，<option style="display: none;">并不能起作用。当我按上或下按钮时，我必须将选择的选项在选择列表中向上或向下移动。最近我是这样实现的：

function moveOption(option, up) {
    if (up) {
        option.insertBefore(option.prev());
    } else {
        option.insertAfter(option.next());
    }
}

但问题是 - 如果我有隐藏的选项，我必须按多次按钮才能将其与可见选项切换，因为每次按下按钮时，我都会得到一个与不可见选项切换的选项。为了解决这个问题，我已经尝试过：

option.insertBefore(option.prev(':not(.hidden)'));
option.insertBefore(option.prev('option'));
option.insertBefore(option.prev(':is(visible)'));

但似乎没有一个有效的解决办法。这里是js fiddle链接。

$('#up').click(function() {
  var option = $('select').children('option:selected');
  moveOption(option, true);
});

$('#down').click(function() {
  var option = $('select').children('option:selected');
  moveOption(option, false);
});

function moveOption(option, up) {
  if (up) {
    option.insertBefore(option.prev());
  } else {
    option.insertAfter(option.next());
  }
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select size="10">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <span class="hidden"><option class="hidden" value="4">Four</option></span>
  <span class="hidden"><option class="hidden" value="5">Five</option></span> 
  <span class="hidden"><option class="hidden" value="6">Six</option></span>
  <span class="hidden"><option class="hidden" value="7">Seven</option></span>
  <span class="hidden"><option class="hidden" value="8">Eight</option></span>
  <option value="9">Nine</option>
  <option value="10">Ten</option>
</select>

<input type="button" value="Up" id="up" />
<input type="button" value="Down" id="down" />

- Dmytro

Answer 1

你的示例无法正常工作是因为.next()/.prev()方法只会查找紧随其后和紧邻其前的元素。

如果其中一个紧随其后/紧邻其前的元素被隐藏了，就不会选择任何内容。

你需要使用.prevAll(':visible')/.nextAll(':visible')方法来选择前一个/后一个可见兄弟元素。

然后在链式调用中使用.first()方法来选择第一个匹配项。 更新示例

function moveOption(option, up) {
    if (up) {
        option.insertBefore(option.prevAll(':visible').first());
    } else {
        option.insertAfter(option.nextAll(':visible').first());
    }
}

你可以使用 :first jQuery选择器 而不是使用 .first() 方法:

function moveOption(option, up) {
    if (up) {
        option.insertBefore(option.prevAll(':visible:first'));
    } else {
        option.insertAfter(option.nextAll(':visible:first'));
    }
}

- Josh Crozier