Umordnen von Listenelementen in jQuery

Question

Ich mache eine ul li Element Funktion wie ein select Eingang, von dem Benutzer eine Farbe für die Box auswählen kann.

Hier ist der 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

Wie Sie das aktive Element bleibt an der gleichen Stelle zu sehen.

(Wählen Blaue Farbe und klicken Sie erneut auf Drop-Down)

Gibt es einen Weg, ich das ausgewählte Element der Liste das erste Kind machen?

Answer 1

Leverage Flexbox dann brauchen Sie nicht auf alle Elemente zu mischen. CSS kann sie visuell für Sie "verschieben".

.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

Sie können .prependTo() verwenden, um das Element activeli dem Farbwählerelement voranzustellen.

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

DEMO

Answer 3

Sie sollten die .prepend()-Funktion verwenden.

sollte diese Arbeit:

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

Arbeits JSFiddle

Answer 4

können Sie das aktuelle Element an die erste Stelle der Liste gesetzt mit:

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

https://jsfiddle.net/ksxhwo43/

Answer 5

Die Art und Weise das ausgewählte Element das erste Kind zu machen von Die Liste löst das li dom-Element des ausgewählten Elements und fügt es im ul dom-Element vor.

Sie werden wahrscheinlich verwenden:

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

"Diese Methode ist nützlich, wenn Sie entfernt werden Elemente in das DOM zu einem späteren Zeitpunkt wieder eingesetzt werden

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

"fügen Sie am Anfang jedes Elements in den Satz der übereinstimmenden Elemente ein"