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

我选择了一些隐藏的选项和两个按钮：向上和向下。要隐藏选项，我必须将它们包装成不可见的范围，因为在某些浏览器中，

根本不起作用。当我按下向上或向下按钮时，我必须向上或向下移动选择列表中的选定选项。最近我这样做：

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)'));

但这一切都不管用。这是我的建议

$（'#up'）。单击（函数（）{
var option=$（'select'）。子项（'option:selected'）；
moveOption（option，true）；
});
$（'#down'）。单击（函数（）{
var option=$（'select'）。子项（'option:selected'）；
moveOption（option，false）；
});
功能移动选项（选项，向上）{
如果（向上）{
option.insertBefore（option.prev（））；
}否则{
option.insertAfter（option.next（））；
}
}

。隐藏{
显示：无；
}

一个
两个
三
四
五
六
七
八
九
十

示例不起作用的原因是

.next（）

/

.prev（）

方法仅分别查看紧跟其后的元素和前面的元素

如果紧跟其后/之前的元素之一被隐藏，则不选择任何内容

您需要使用方法/来选择上一个/下一个可见的同级元素

然后链接

.first（）

方法以选择第一个匹配项

除了使用

.first（）

方法外，您还可以使用以下方法：

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

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