This Blog is protected by DMCA.com

Followers

about

about

Follow by Email

Technology

Total Pageviews

Popular Posts

Blog Archive

Search This Blog

How To Select Element By Index In Jquery

Select Element By Index In Jquery ,How To Select Element By Index In Jquery,Select Element By Index – Example 1(Less Than),Select Element By Index – Example 2 (Greater Than)
Share it:
Select Element By Index In Jquery


Select Element By Index In Jquery 


In this topic, we will see how to select an element by index in jquery.



Select Element By Index:-


In any situation, we might want to select an element by index. Jquery allows us to select an element by index. It is very easy to perform this simple task using jquery. we will see different types of examples to understand the topic easily.

If you want to select the first element, use an index of 0. The second element has an index of 1, the third an index of 2, and so on

Select Element By Index Example 1(Less Than)



In the following example we will see how to select all the <p> elements and change the background color that is less than the given index value.

$(‘p:lt(3)’).css(‘background-color’,’lightgreen’); This line tells jquery to select all the <p> element that is less than the index value. Here the index value is 3, so it will select all the <p> element that is less than the 3 and set the background color to lightgreen.

Select Element By Index Example 2 (Greater Than)


The following example is very much similar to the above example. It will select all the <p> elements and change the font style that is greater then the given index value



<!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:gt(3)').css('font-family','Comic Sans MS');
        });
    </script>
<body>
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
<p>paragraph 6</p>
</body>
</html>


$(‘p:gt(3)’).css(‘font-family’,’Comic Sans MS’);This line tells jquery to select all the <p> element that is greater than the index value. Here the index value is 3, so it will select all the <p> element that is greater than the 3 and set the font to Comic Sans MS.



Select Element By Index Example 3(Equal)


In the following HTML example, we will see how to change the font style and background color of <p> elements which is equal to the index value.

                                 Share this article with your friends


Share it:
Reactions:

jQuery

Post A Comment: