Nivedita Nivedita - 2 months ago 17
CSS Question

Rearranging list elements in jQuery

I am making a

ul li
element function like a
select
input from which user can select a color for the box.

Here's the code:



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

As you can see the active element remains at the same place.

(Select Blue color and click drop down again)

Is their a way I can make the selected element the first child of the list?

Answer

Leverage Flexbox then you don't need to shuffle elements at all. CSS can visually "move" them for you.

 .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