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()方法？任何帮助都非常适合。

Answer 1

使用insertAfter()以及:first和:last。如果需要，您可以使用id属性来选择元素，但这会使您的代码更加脆弱。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您也可以通过以下方法实现这一目标。

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>

Answer 3

您也可以在eq()中使用jquery。但@Rory建议采用一种简单的方法。但eq()可以找到您列表中的任何位置。

eq（）方法提供从0开始的位置。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何用jQuery显示最后一个li之后的第一个li

3 个答案: