jQuery: .eq()

This entry is part 28 of 33 in the series jQuery Tutorial

The .eq() method reduces the set of matched elements to the one at the specified index.

The supplied index identifies the position of this element in the set.

<!doctype html>
<html>
<head>
    <title>eq demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        div {
            width: 60px;
            height: 60px;
            margin: 10px;
            float: left;
            border: 2px solid blue;
        }

        .blue {
            background: blue;
        }
    </style>
</head>
<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<script>
    $('body').find('div').eq(2).addClass('blue');
</script>

</body>
</html>

Try The Code

In the example above, the supplied index is 2.

jQuery: Other common traversing methods

This entry is part 27 of 33 in the series jQuery Tutorial

We have looked at find and and we have looked at children.

Here are other common traversing methods.

MethodsDescription
.add()Add elements to the set of matched elements.
.children()Get the children of each element in the set of matched elements, optionally filtered by a selector.
.each()Iterate over a jQuery object, executing a function for each matched element.
.end()End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.
.eq()Reduce the set of matched elements to the one at the specified index.
.filter()Reduce the set of matched elements to those that match the selector or pass the function’s test.
.find()Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
.first()Reduce the set of matched elements to the first in the set.
.has()Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
.last()Reduce the set of matched elements to the final one in the set.
.next()Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
.not()Remove elements from the set of matched elements.
.parent()Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
.siblings()Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
.prev()Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

jQuery: find

This entry is part 26 of 33 in the series jQuery Tutorial

find will get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Given a jQuery object that represents a set of DOM elements, the find method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements.

The find and children methods are similar, except that the latter only travels a single level down the DOM tree.

<!doctype html>
<html>
<head>
    <title>find demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>

<p><span>Hello</span>, how are you?</p>

<p>Me? I'm <span>good</span>.</p>

<script>
    $('p').find('span').css('color', 'red');
</script>

</body>
</html>

Button

jQuery: children

This entry is part 25 of 33 in the series jQuery Tutorial

We have looked at .parent and now we look at .children in the following code.
Children

<!doctype html>
<html>
<head>
    <title>children demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        body {
            font-size: 16px;
            font-weight: bolder;
        }

        span {
            color: blue;
        }

        p {
            margin: 5px 0;
        }
    </style>
</head>
<body>

<p>Hello (this is a paragraph)</p>

<div><span>Hello Again (this span is a child of the a div)</span></div>
<p>And <span>Again</span> (in another paragraph)</p>

<div>And One Last <span>Time</span> (most text directly in a div)</div>

<script>
    $('div').children().css('border-bottom', '3px double red');
</script>

</body>
</html>
Try The Code

The line

$('div').children().css('border-bottom', '3px double red');

will look for the children of <div> and put 2 borderlines on them.  As there is no selector in .children(), any children of <div> will be selected.

jQuery: Traversing

This entry is part 24 of 33 in the series jQuery Tutorial

With selectors, you can pin point a particular html element.

Once an element is targeted, you can traverse around the element using the 3 relationships – Parents, children and sibblings.

jQuery provides a rang of methods to traverse or move around an element.

Below, we look at the .parent() method.

<!doctype html>
<html>
<head>
    <title>parent demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>

<div><p>Hello</p></div>
<div class='selected'><p>Hello Again</p></div>

<script>
    $('p').parent('.selected').css('background', 'yellow');
</script>

</body>
</html>

Try The Code

We could explain this line:

$('p').parent('.selected').css('background', 'yellow');

It looks for a <p> element and its parent has a class=’selected’.  The statement will traverse around the html elements and look for a match.

There is only one <p> tag in the above example.  The same would go for multiple <p> tags.  Only <p> with a parent of class=’selected’ will be selected in the following example.

<!doctype html>
<html>
<head>
    <title>parent demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>

<div class='sel'><p>Hello</p></div>
<div class='selected'><p>Hello My Friend.</p>

    <p>Hello 2</p>

    <p>Hello 3</p></div>

<script>
    $('p').parent('.selected').css('background', 'yellow');
</script>

</body>
</html>

Try The Code