jQuery Selectors: Selects element at specific zero-based index

This entry is part 30 of 33 in the series jQuery Selectors

$(‘:eq(index)’)

The example used here is $(‘p:eq(1)’).

It selects the second <p> element in the page and the reason that it selects the second is that the index is zero based.

The first <p> starts at 0 index.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML5</title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script>
        $(function () {
            $('p:eq(1)').css('background-color', 'yellow');
        });
    </script>
</head>
<body>

<article>
    <header>
        <h1>Ushuaia</h1>

        <p>Ushuaia is the capital of Tierra del Fuego in Argentina</p>
    </header>
    <section>
        <p>It is commonly regarded as the southernmost city in the world.</p>

        <p>They also built a railway now a tourist attraction known as the End of the World Train</p>
    </section>
</article>

</body>
</html>

Series Navigation<< jQuery Selectors: Selects elements that are of header type
jQuery Selectors: Applying indexed selector to table row >>

Leave a comment

Leave a Reply