如何使用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()方法僅分別查看緊隨其后的元素。

如果隱藏了緊隨其后的/前一個元素之一，則不選擇任何內容。

您需要使用方法.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'));
    }
}