jQueryで最後のliの後に最初のliを表示するには

Question

最初のliを削除し、最後のliの後にjQueryを使用して追加します。ここに私のHTMLコードです。

<ul id="client_list"> 
    <li id="1"><img src="img/client.png"/>1</li> 
    <li id="2"><img src="img/client1.png"/>2</li> 
    <li id="3"><img src="img/client2.png"/>3</li> 
    <li id="4"><img src="img/client3.png"/>4</li> 
    <li id="5"><img src="img/client4.png"/>5</li> 
    <li id="6"><img src="img/client5.png"/>6</li> 
    <li id="7"><img src="img/client6.png"/>7</li> 
</ul> 

それはjQueryのhide()とshow()方法で行うことは可能ですか？任意のヘルプは非常にappriciate。

Answer 1

insertAfter()と:firstと:lastを一緒に使用してください。必要に応じてid属性を使用して要素を選択することもできますが、これによりコードが脆弱になります。

$('li:first').insertAfter('li:last');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="client_list"> 
 
    <li id="1"><img src="img/client.png"/>1</li> 
 
    <li id="2"><img src="img/client1.png"/>2</li> 
 
    <li id="3"><img src="img/client2.png"/>3</li> 
 
    <li id="4"><img src="img/client3.png"/>4</li> 
 
    <li id="5"><img src="img/client4.png"/>5</li> 
 
    <li id="6"><img src="img/client5.png"/>6</li> 
 
    <li id="7"><img src="img/client6.png"/>7</li> 
 
</ul>

Answer 2

またjqueryでeq()を使用することができます。しかし、@Roryは非常に簡単なアプローチを提案しています。しかし、eq()はあなたのリスト内の任意の位置を見つけることができます。

0ベースの位置を提供するeq（）メソッドです。

$('#client_list').find('li').eq(0).insertAfter('#client_list>li:last');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="client_list"> 
 
    <li id="1"><img src="img/client.png"/>1</li> 
 
    <li id="2"><img src="img/client1.png"/>2</li> 
 
    <li id="3"><img src="img/client2.png"/>3</li> 
 
    <li id="4"><img src="img/client3.png"/>4</li> 
 
    <li id="5"><img src="img/client4.png"/>5</li> 
 
    <li id="6"><img src="img/client5.png"/>6</li> 
 
    <li id="7"><img src="img/client6.png"/>7</li> 
 
</ul>

Answer 3

また、次の方法で、これを達成することができます。

var firstLI = $("#client_list li").first(); 
 
$("#client_list").append(firstLI);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="client_list"> 
 
    <li id="1"><img src="img/client.png"/>1</li> 
 
    <li id="2"><img src="img/client1.png"/>2</li> 
 
    <li id="3"><img src="img/client2.png"/>3</li> 
 
    <li id="4"><img src="img/client3.png"/>4</li> 
 
    <li id="5"><img src="img/client4.png"/>5</li> 
 
    <li id="6"><img src="img/client5.png"/>6</li> 
 
    <li id="7"><img src="img/client6.png"/>7</li> 
 
</ul>