如何使用jQuery在last 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()可以在您的列表中找到任何位置。

eq（）方法提供基於0的位置。

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