$(document).ready(function () { //target the ul you desire to process var $ul = $('.target-ul'); //grab the last 6 lis, and pull them off the dom var $last6lis = $ul.find('li:gt(5)').remove(); //make your new ul, to put the dom elements in var $newUl = $('<ul></ul>'); //append the elements back on the DOM - easy :) $ul.after($newUl.html($last6lis)); });
<ul class="target-ul"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> <li>Item 11</li> <li>Item 12</li> </ul>
ul { margin-top:12px; background-color:rgba(128, 128, 64, 0.2); width:48%; display:block; float:left; margin-left:1%; border-radius:5px; padding:0; list-style-type: none; border: 1px solid #cccccc; } ul li { text-indent:8px; font-family: Helvitica, Calibri, Arial; font-size:18px; }