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
Post a Comment