<div class="container">
  <h1>jQuery .first(), .last()</h1>
  <ul class="list-group">
    <li class="list-group-item" data-list="0">Cras justo odio</li>
    <li class="list-group-item" data-list="1">Dapibus ac facilisis in</li>
    <li class="list-group-item" data-list="2">Morbi leo risus</li>
    <li class="list-group-item" data-list="3">Porta ac consectetur ac</li>
    <li class="list-group-item" data-list="4">Vestibulum at eros</li>
  </ul>
  <hr>
  <h1>jQuery .filter(), .even(), .odd(), .has()</h1>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

$(document).ready(function () {
  $("ul li").first().addClass("bg-primary text-white");
  var listItem = $("ul li").first().data();
  console.log(listItem);
  $("ul li").last().addClass("bg-danger text-white");

  $(".table tr").filter(":even").addClass("bg-primary");
  $(".table tr").odd().addClass("bg-danger text-white");

  $("ul li").eq("1").addClass("disabled bg-warning");
});