изменить положение литий

Question

Я хочу, чтобы изменить положение Ли в JQuery У меня есть 3 элемента списка

<li class="flex-active-slider"> 
<div class="node_id"><span>233</span></div> 
<ul> 
    <li class="69"><img></li> 
    <li class="233"><img></li> 
    <li class="299"><img></li> 
</ul> 
</li> 
<a href="#" class="flex-next">click<a> 

OnLoad второй элемент списка находится в центре, как я ожидал. onload [1,2,3], при щелчке я хочу изменить позицию списка как [3,1,2] и следующий щелчок [2,3,1]. Я хочу изменить список, как указано выше, щелчком функция

$('.flex-next').click(function(){ 
    //want to change in jquery 
}); 

Answer 1

Во-первых, вы должны быть в состоянии выбрать ul тег.

Это основная идея. Вы можете настроить его.

$('.flex-next').click(function(){ 
 
    ul = $('#myUi'); 
 
    lis = $(ul).find('li'); 
 
    $(ul).html(''); 
 
    len = lis.length; 
 
    $(ul).append(lis[--len]); 
 
    for (i = 0; i< len; i++) { 
 
    \t $(ul).append(lis[i]); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul id="myUi"> 
 
    <li class="69">1</li> 
 
    <li class="233">2</li> 
 
    <li class="299">3</li> 
 
</ul> 
 
</li> 
 
<a href="#" class="flex-next">click<a>

Answer 2

вы можете использовать отделяться от элементов, а затем использовать Append. как это:

var parent = $("div.node_id ul"); 
var elem1 = $("li.69"); 
var elem2 = $("li.233"); 
var elem3 = $("li.299"); 

$('.flex-next').click(function(){ 
    elem1.detach(); 
    elem2.detach(); 
    elem3.detach(); 

    parent.append(elem3); 
    parent.append(elem1); 
    parent.append(elem2); 
});