Slice li under a ul : slice « jQuery « JavaScript DHTML






  1. JavaScript DHTML
  2. jQuery
  3. slice

Slice li under a ul

 


<html>
  <head>
    <script type='text/javascript' src='js/jquery-1.3.2.js'></script>
    <script type='text/javascript'>
var tmpExample = {
  ready : function() {
    $('ul#uiID li').slice(0, 4).addClass('justAdd');
  }
};

$(document).ready(tmpExample.ready);
    </script>
    <style type='text/css'>

ul#uiID {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#uiID li {
    margin: 1px;
    padding: 3px;
}
li.justAdd {
    background: #fcc16e;
}
    </style>
  </head>
  <body id='tmpExample'>
    <ul id='uiID'>
      <li class='liClass1'>A</li>
      <li class='liClass1'>B</li>
      <li class='liClass1'>C</li>
      <li class='liClass1'>D</li>
      <li class='liClass2'>E</li>
      <li class='liClass2'>F</li>
      <li class='liClass2'>G</li>
      <li class='liClass2'>H</li>
      <li class='liClass3'>I</li>
      <li class='liClass3'>J</li>
    </ul>

  </body>
</html>








Related examples in the same category

1.Slice start and end
2.Slice start till ends
3.Slices paragraphs to include only the first and second element.
4.Slices paragraphs to include only the second element.
5.Slice paragraphs to include only the second and third element.
6.slice to the end