Udara Udara - 20 days ago 6
HTML Question

How to show first li after last li with jQuery

I want to remove first li and add that after last li using jQuery. Here is my html code.

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


Is it possible to do with jQuery
hide()
and
show()
methods? Any help highly appriciate.

Answer

Use insertAfter() along with :first and :last. You can use the id attributes to select the elements if you want, but that will make your code more brittle.

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