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

活用フレキシボックスを、あなたはすべての要素をシャッフルする必要はありません。 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)); 

ワーキングJSFiddle

Answer 4

あなたはと、リストの最初の場所に現在の要素を設定することができます。

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

https://jsfiddle.net/ksxhwo43/

Answer 5

選択された要素の最初の子を作るための方法をそのリストは、選択された項目の要素を切り離して、ulの要素にあらかじめ追加しています。

あなたは、おそらく使用しようとしている。

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

「削除要素が後でDOMに再挿入する場合、この方法は便利です

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

を"一致した要素のセットの各要素の先頭に挿入"