在 li 的特定类的准备位置上

Question

我编写了这个页面，我想通过滚轮鼠标在li菜单中导航。我的问题是：我希望选择的类的li位于左侧的第一个位置。

我该如何使用jquery代码使特定的li与在此位置选择的类一起使用？

$(document).ready(function() {
var scrolling_size = 0;
$("li").each(function(index) {
scrolling_size += parseInt($(this).css("width"));
});
$("#menu").css("width", scrolling_size);
scrolling_size = scrolling_size - parseInt($('#container').css("width"));
$('#menu').bind('mousewheel', function(e) {
$("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
if (e.originalEvent.wheelDelta > 0) {
if (parseInt($(this).css("left")) <= -50) {
$(this).css("left", "+=50");
}
} else {
if (parseInt($(this).css("left")) >= -scrolling_size) {
$(this).css("left", "-=50");
}
}
});
});

#l,
#r {
float: left;
font-size: 80px;
}
#container {
float: left;
border: 1px solid green;
width: 500px;
padding: 2px;
overflow: hidden;
position: relative;
}
#menu {
border: 1px solid blue;
padding: 2px;
position: relative;
}
ul {
list-style-type: none;
white-space: nowrap;
overflow-x: visible;
margin: 0;
padding: 0;
}
li {
border: 1px solid red;
display: inline-block;
font-size: 80px;
}
.selected {
background: #0095ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul>
<li>Hi !</li>
<li>Text here</li>
<li>Something like this</li>
<li class="selected">Always</li>
<li>Thanks !</li>
<li>Bye</li>
</ul>
</div>
</div>

喜欢这个： 图像

我试过这个：

$("#menu").css("left", $(".selected").css("left"));

但这不是工作 请帮助我

Answer 1

在$("#menu ul li.selected").prependTo("#menu ul");中尝试一下

$(document).ready(function() {
$("#menu ul li.selected").prependTo("#menu ul");
var scrolling_size = 0;
$("li").each(function(index) {
scrolling_size += parseInt($(this).css("width"));
});
$("#menu").css("width", scrolling_size);
scrolling_size = scrolling_size - parseInt($('#container').css("width"));
$('#menu').bind('mousewheel', function(e) {
$("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
if (e.originalEvent.wheelDelta > 0) {
if (parseInt($(this).css("left")) <= -50) {
$(this).css("left", "+=50");
}
} else {
if (parseInt($(this).css("left")) >= -scrolling_size) {
$(this).css("left", "-=50");
}
}
});
});

#l,
#r {
float: left;
font-size: 80px;
}
#container {
float: left;
border: 1px solid green;
width: 500px;
padding: 2px;
overflow: hidden;
position: relative;
}
#menu {
border: 1px solid blue;
padding: 2px;
position: relative;
}
ul {
list-style-type: none;
white-space: nowrap;
overflow-x: visible;
margin: 0;
padding: 0;
}
li {
border: 1px solid red;
display: inline-block;
font-size: 80px;
}
.selected {
background: #0095ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul>
<li>Hi !</li>
<li>Text here</li>
<li>Something like this</li>
<li class="selected">Always</li>
<li>Thanks !</li>
<li>Bye</li>
</ul>
</div>
</div>

Answer 2

我找到了答案 我们必须添加这个：

var  pos = $("li.selected").position();
$("#menu").css("left", pos);