重新排列jQuery中的列表元素

我正在制作一个ul li元素函数，如select输入，用户可以从中为该框选择颜色。重新排列jQuery中的列表元素

下面的代码：

$(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

正如你所看到的有源元件保持在同一个地方。

（选择蓝色，然后再次单击下拉）

是他们的一种方法，我可以使所选元素列表中的第一个孩子？

来源

2016-09-21 Nivedita

使用柔性盒定位并设置o首先选择元素（请参见[这里]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）以获取有关使用柔性定位的更多信息）。当然，这取决于你瞄准哪些浏览器，但根据[caniuse]（http://caniuse.com/#feat=flexbox），对flex的支持现在相当不错，> 96％。 –

杠杆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; 
}

JSfiddle Demo

来源

2016-09-21 11:59:11

你能告诉什么命令：2意味着什么？这在所有浏览器中都受支持吗？ – Nivedita

正如我在你的问题的评论中提到的，caniuse表明，96％的浏览器支持这一点（请参阅[caniuse]（http://caniuse.com/#feat=flexbox）），但不是全部。特别是IE <10不支持flexbox和IE10，IE11有点bug，但是通常我发现这种类型的工作正常 –

您可以使用.prependTo()将activeli元素预先添加到颜色选择器元素。

$(this).prependTo('.color-picker ul.color-list');

DEMO

来源

2016-09-21 11:57:13 Satpal

您应该使用.prepend()功能。

这应该工作：

$('.color-list').prepend($(this));

工作JSFiddle

来源

2016-09-21 11:58:15 P13

您可以将当前元素设置为首位列表的搭配：

$('.color-picker ul.color-list').prepend($(this));

https://jsfiddle.net/ksxhwo43/

来源

2016-09-21 11:59:12

，使所选元素的第一个孩子的方式该列表将分离选定项目的内容元素并将其预先附加到ul dom元素中。

你可能要使用：

https://api.jquery.com/detach/

“时取出元素在稍后的时间被重新插入到DOM此方法非常有用

http://api.jquery.com/prepend/。”

“在匹配元素组中的每个元素的开始处插入”

来源

2016-09-21 12:08:36

重新排列jQuery中的列表元素

回答

相关问题