Learn jQuery-4 : Relationships

The title of this lesson might sound a little goofy but all your queries will be answered in the next paragraph.

At first the difference between selectors and relationships might not be obvious. There is one very important thing to remeber. If we select an element using selectors all the commands after that selector will be applied to the element we selected. With relatoinships you change the element to where the actions are applied to on the fly. Lets look at a simple example.

<div>
<a>Link</a>
<p>Paragraph</p>
<span>
<form></form>
</span>
</div>

Lets say we wanted to change the text color of the green element and then add some padding to the red

tag. After adding some padding we wanted to change the font size of all the elements in the red

tag. If we did it with selectors, it would look something like this:

$("a").css({"color": "#CCC"});
 $("div").css({"padding": "5px"});
 $("div > *").css({"font-size": "18px"});

Quite some code. Using relationships it could be as short as this:

$("a").css({"color": "#CCC"}).parent().css({"padding": "5px"}).children().css({"font-size": "18px"});

Much cleaner! Don’t worry about the .css() command. It will be explained in a future lesson.

1. Relationships

.children() = Returns the children of selected element

.content() = Returns the content of the selected element

.next() = Returns the next element after the currently selected one. This is used in my inbox tutorial and developphp’s inbox.

.nextAll() = Returns all the next elements. The difference between .next() and .nextAll() is that .next() only returns the element directly after the currently selected element. Obviously .nextAll() will return all the elements after the selected element

.parent() = Returns the parent of the selected element

.parents() = Returns the parent of the selected element. The difference between this and .parent() is that .parent() can only go up one level in the DOM tree. .parents() can go up multiple levels. If you want to select parents very precisely you can add a selector between the brackets.
$(“form”).parent() = If we went back to the code example above and we executed this code it would select the green element.

$(“form”).parents(“div”) = This will select the red

tag and not the green tag

.prev() = Does the same as .next() but instead of returning elements after the current one, it returns elements before the current one

.prevAll() = Does the same as .nextAll() but instead of returning all the elements after the current one, it returns all the elements before the current one

.siblings() = Returns all the siblings. Read more about siblings in the previous lesson.