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 fiddle。

＆＃13;

$('#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());
  }
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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" />

＆＃13;

Answer 1

您的示例无效的原因是.next() / .prev()方法仅分别查看后面和前面的。

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

您需要使用.prevAll(':visible') / .nextAll(':visible')方法来选择上一个/下一个可见的兄弟元素。

然后链接.first()方法以选择第一个匹配。

Updated Example

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

您可以使用:first jQuery selector：
，而不是使用.first()方法。
function moveOption(option, up) { if (up) { option.insertBefore(option.prevAll(':visible:first')); } else { option.insertAfter(option.nextAll(':visible:first')); } }

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

1 个答案: