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

Question

我选择了一些隐藏选项和两个按钮:向上和向下.要隐藏选项,我必须将它们包装到不可见的范围内,因为在某些浏览器<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小提琴.

$('#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" />

Answer 1

您的示例不起作用的原因是因为.next()/ .prev()methods仅分别查看紧随其后的元素.

如果隐藏了紧随其后的/前一个元素之一,则不选择任何内容.

您需要使用方法.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()您也可以使用:firstjQuery选择器,而不是使用该方法:

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