Using traversal or filtering examples on list in jquery


 Using traversal or filtering examples on list in jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!---I Type HTML Code--->
<div id="vacations-wrapper">
  <h1>Demo Html Code 1</h1>
  <ul id="vacations">
    <li class="vacation america">
      <h2>AA</h2>
      <span class="details">$100</span>
    </li>
    <li class="vacation america">
      <h2>BB</h2>
      <span class="details">$200</span>
    </li>
    <li class="vacation europe">
      <h2>CC</h2>
      <span class="details">$400</span>
    </li>
    <li class="vacation asia">
      <h2>DD</h2>
      <span class="details">$800</span>
    </li>
  </ul>
</div>

<script>
$(document).ready(function()
{
   //select the first vacation li element from the list.
   $("#vacations li").first();
   //select the last vacation li element from the list.
   $("#vacations li").last();
   //Using traversal, find a way to select the second to last vacation
   $("#vacations li").last().prev();
   //use traversal utilizing the find method.
   $("#vacations").find('.america');

});
</script>


<!---II Type HTML Code--->
<div id="tours-wrapper">
  <h1>Demo Html Code 2</h1>
  <ul id="tours">
    <li class="usa">
      <h2>AA</h2>
      <span class="details">$1,100 for 7 nights</span>
    
    </li>
    <li class="europe">
      <h2>BB</h2>
      <span class="details">$2,200 for 7 nights</span>

    </li>
    <li class="europe sale">
      <h2 class="featured">CC</h2>
      <span class="details">$1,400 for 5 nights</span>
    </li>
    <li class="asia">
      <h2>DD</h2>
      <span class="details">$1,800 for 5 nights</span>
    </li>
  </ul>
</div>

<script>
$(document).ready(function()
{
   //Using traversal, select all tours who have a featured class
   $("#tours .featured").parent();
 
});

</script>

Comments

Popular posts from this blog

Login with facebook using coldfusion

Create CSV file in Coldfusion Using CFFile

Get Previous One Day Data in Sql Server