Изменение элементов списка в jQuery

Question

Я создаю функцию элемента 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

Как вы можете видеть, что активный элемент остается на том же месте.

(выберите синий цвет и нажмите выпадающий снова)

Является ли их способ, которым я могу сделать выбранный элемент первого ребенка в списке?

Answer 1

плечо 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

Answer 2

Вы можете использовать .prependTo(), чтобы добавить элемент activeli к элементу выбора цвета.

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

DEMO

Answer 3

Вы должны использовать функцию .prepend().

Это должно работать:

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

Working JSFiddle

Answer 4

вы можете установить текущий элемент на первое место в списке с:

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

https://jsfiddle.net/ksxhwo43/

Answer 5

способ сделать выбранный элемент первого ребенка список отделяет элемент li dom выбранного элемента и предварительно добавляет его в элемент ul dom.

Вы, вероятно, будет использовать:

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

"Этот метод полезен, когда удаленные элементы должны быть повторно в DOM на более позднее время

http://api.jquery.com/prepend/."

«вставить в начале каждого элемента в наборе согласованных элементов»