JavaScript & jQuery Video Tutorial

Part 8 - jQuery Traversing

The following code is from the Video.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
 <div>
    <h1>Heading 1</h1>
    <p>First line of text.</p>
    <p class="second">Second line of text.</p>
    <p>Third line of text.</p>
 </div>
 <h1>Heading outside of div</h1>
 <div>Text in a div.</div>

 
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>

</html>

add() Add to selection

Adds to the current selection. Example: $(this).add("p") - Click on a heading to change its background color and the background color of all <p> elements.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).add("p").css("background-color", "red");
  });
});

Try it out.

not() Remove from selection

Remove from the current selection. Example: $("p").not("p.second") - Click on a heading to change the background color of all <p> elements except the one with a class name of "second."

$(document).ready(function() {
  $("h1").click(function() {
    $("p").not("p.second").css("background-color", "red");
  });
});

Try it out.

next() Get next sibling

Get the next sibling after the current selection. Single match. Example: $("div").next() - Click on a heading to change the background color of the second <h1> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("div").next().css("background-color", "red");
  });
});

Try it out.

next() Get next sibling

Get the next sibling after the current selection. Multiple matches. Example: $("h1").next() - Click on a heading to change the background color of the first element following each <h1> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("h1").next().css("background-color", "red");
  });
});

Try it out.

next() Get next sibling

Get the next sibling after the current selection if it matches the specified selector. Example: $("h1").next("div") - Click on a heading to change the background color of the first <div> element following the second <h1> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("h1").next("div").css("background-color", "red");
  });
});

Try it out.

next() Get next sibling

Get the next sibling after the current selection. Example: $(this).next() - Click on a heading to change the background color of the first sibling element that follows it.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).next().css("background-color", "red");
  });
});

Try it out.

prev() Get previous sibling

Get the previous sibling before the current selection. Example: $("p").prev() - Click on a heading to change the background color of the elements that precede the <p> elements.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").prev().css("background-color", "red");
  });
});

Try it out.

parent() Get the parent element

Get the parent element of the current selection. Example: $(this).parent() - Click on the first heading to change the background color of the first <div> element.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).parent().css("background-color", "red");
  });
});

Try it out.

find() Get descendants

Get the descendants of the current selection if they match the specified selector. Example: $("div").find("p") - Click on a heading to change the background color of the <p> elements that are descendants of <div> elements.

$(document).ready(function() {
  $("h1").click(function() {
    $("div").find("p").css("background-color", "red");
  });
});

Try it out.

first() Get the first selected element

Get the first selected element from the current selection. Example: $("p").first() - Click on a heading to change the background color of the first <p> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").first().css("background-color", "red");
  });
});

Try it out.

last() Get the last selected element

Get the last selected element from the current selection. Example: $("p").last() - Click on a heading to change the background color of the last <p> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").last().css("background-color", "red");
  });
});

Try it out.

eq() Get the selected element at the specified index

Get the selected element at the specified index. The first selected element is at index 0. Example: $("p").eq(1) - Click on a heading to change the background color of the second <p> element.

$(document).ready(function() {
  $("h1").click(function() {
    $("p").eq(1).css("background-color", "red");
  });
});