在jQuery中重新排列列表元素
Rearranging list elements in jQuery
我正在使ul li
元素的功能类似于select
输入,用户可以从中选择框的颜色。
代码如下:
$(document).ready(function() {
$('.color-picker ul.color-list li.active .text').after('<span class="pull-right glyphicon glyphicon-menu-down"></span>');
$('.color-picker ul.color-list li').click(function() {
if ($(this).hasClass('active')) {
console.log(2);
$('.color-picker ul.color-list li').show();
} else {
console.log(1);
var color = $(this).find('.box').css('backgroundColor');
$('.color-picker .color-box').css({
'background-color': color
});
$('.color-picker ul.color-list li.active').removeClass('active');
$('.color-picker ul.color-list li').hide();
$(this).addClass('active');
$('.color-picker ul.color-list li.active').show();
$('.color-picker ul.color-list li .glyphicon').remove();
$('.color-picker ul.color-list li.active .text').after('<span class="pull-right glyphicon glyphicon-menu-down"></span>');
}
});
});
.color-picker {
display: flex;
margin: 20px;
border: 1px solid #d9d9d9;
padding: 10px;
width: 350px;
}
.color-picker .color-box {
display: inline-block;
background-color: black;
height: 50px;
width: 50px;
}
.color-picker ul.color-list {
display: inline-block;
margin: 0;
position: absolute;
}
.color-picker ul.color-list li {
list-style: none;
border: 1px solid #d9d9d9;
padding: 10px;
cursor: pointer;
width: 200px;
background-color: white;
}
.color-picker ul.color-list li.active {
display: block;
}
.color-picker ul.color-list li {
display: none;
}
.color-picker ul.color-list li .box {
content: "";
display: inline-block;
height: 10px;
width: 30px;
margin-right: 10px;
}
.color-picker ul.color-list li.red .box {
background-color: #c71212;
}
.color-picker ul.color-list li.blue .box {
background-color: #0d89d1;
}
.color-picker ul.color-list li.green .box {
background-color: #18c771;
}
.color-picker .as-select .select-default {
border: 1px solid #d9d9d9;
padding: 10px 20px;
width: 200px;
margin-left: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-picker">
<div class="color-box">
</div>
<div class="as-select">
<ul class="color-list">
<li class="red active">
<span class="box"></span>
<span class="text">Red</span>
</li>
<li class="blue">
<span class="box"></span>
<span class="text">Blue</span>
</li>
<li class="green">
<span class="box"></span>
<span class="text">Green</span>
</li>
</ul>
</div>
</div>
jsFiddle
正如你所看到的,活动元素仍然在原来的位置。
(选择蓝色并再次点击下拉键)
是否有一种方法可以使所选元素成为列表的第一个子元素?
利用Flexbox,那么您根本不需要洗牌元素。CSS可以在视觉上为你"移动"它们。
.color-picker ul.color-list {
display: inline-flex;
margin: 0;
flex-direction: column;
}
.color-picker ul.color-list li {
list-style: none;
border: 1px solid #d9d9d9;
padding: 10px;
cursor: pointer;
order:2;
width: 200px;
}
.color-picker ul.color-list li.active {
display: block;
order:1;
}
<<p> JSfiddle演示/strong> 您可以使用.prependTo()
将active
li
元素添加到颜色选择器元素。
$(this).prependTo('.color-picker ul.color-list');
演示您应该使用.prepend()
函数。
这个应该可以工作:
$('.color-list').prepend($(this));
工作JSFiddle 可以使用以下命令将当前元素设置为列表的第一个位置:
$('.color-picker ul.color-list').prepend($(this));
https://jsfiddle.net/ksxhwo43/使所选元素成为列表的第一个子元素的方法是将所选元素的li dom元素分离,并将其预先附加在ul dom元素中。
你可能会使用:
https://api.jquery.com/detach/"当删除的元素稍后要重新插入到DOM中时,此方法非常有用。
http://api.jquery.com/prepend/"
相关文章:
- 重新排列HTML元素的顺序并更改内容
- 将列表元素动画制作到顶部
- 使用Razor和javascript来获得下拉列表元素
- 根据列表元素的值使用JQuery获取列表元素
- 将列表元素动态添加到ul元素中
- 使用 jquery 库获取锚点列表元素内的文本
- 在没有大量回调函数的情况下在列表元素上循环播放同一动画
- 使用JSON和JavaScript添加额外的html列表元素
- 有没有比在本例中使用matchMedia更聪明的方法来重新排列页面元素
- 如何根据 js 中每个单词的第 n 个字母按字母顺序排列列表
- 范围和列表元素在 DIV 中换行
- angularjs-ng视图重新排列html元素
- jQuery:影响相同深度的列表元素
- 所选列表元素不会保持选中状态(通过ajax请求更新后)
- 排列<p>使用jQuery按日期顺序排列的元素
- 如何允许我的访问者通过拖放来排列列表项目
- 按字母顺序排列列表
- 一次显示n个列表元素,jQuery
- 将列表元素宽度设置为文本宽度
- 在jQuery中重新排列列表元素