AdBlock Detected

We provide high-quality source code for free. Please consider disabling your AdBlocker to support our work.

Buy me a Coffee

Saved Tutorials

No saved posts yet.

×
Press Enter to see all results
Home jQuery jQuery | eq() Selector - trickcode

jQuery | eq() Selector - trickcode

By pushpam abhishek • •
Listen to this article
In this topic, we will learn a jquery Eq selector. jquery Eq selector allows us to select all elements at a specified index.

Jquery Eq Selector:-

jquery Eq selector matches a specific element by counting from the first element to the index value. Suppose that you want to choose the third <p> element on the page. Because the count starts with 0, to select the third <p> element, do the following.

$(‘p:eq(2)’).text(‘Changed this text.’);

jquery Eq selector example:-

In the following HTML example, we will see how to change the font style of <p> elements which is equal to the index value. To accomplish this task we can make use of : eq(index)



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('p:eq(2)').css('font-family','Comic Sans MS');
        });
    </script>
</head>
<body>
<p>Paragraph 1-index[0]</p>
<p>Paragraph 2-index[1]</p>
<p>Paragraph 3-index[2]</p>
<p>Paragraph 4-index[3]</p>
<p>Paragraph 5-index[4]</p>
<p>Paragraph 6-index[5]</p>
</body>
</html>

output:

Paragraph 1-index[0]
Paragraph 2-index[1]
Paragraph 3-index[2]
Paragraph 4-index[3]
Paragraph 5-index[4]
Paragraph 6-index[5]

jquery Eq selector example explanation:-

$(‘p:eq(2)’).css(‘font-family’,’Comic Sans MS’); This line tells jquery to select <p> element which is equal to the index value. Here the index value is 2, so it will select the third <p> element. So jquery will change the third <p> elements font using CSS method.

Share this post

pushpam abhishek

About pushpam abhishek

Pushpam Abhishek is a Software & web developer and designer who specializes in back-end as well as front-end development. If you'd like to connect with him, follow him on Twitter as @pushpambhshk

You Might Also Like

Comments

← Newer Older →