Question : eq jquery
Answered by : jeremy-l
//Consider a page with a simple list on it:
//HTML ----------------------------------->
//<ul>
// <li>Index[0]list[-4] item 1</li>
// <li>Index[1]list[-3] item 2</li>
// <li>Index[2]list Red Background[-2] Item 3</li>
// <li>Index[3]list Blue Backgound[-1] item 4</li>
// <li>Index[4]list[-0] item 5</li>
//</ul>
//We can apply a jQuery method on a specific indexed item thanks to eq()
$( "li" ).eq( 2 ).css( "background-color", "red" );
The method above accesses the css selector and changes
its background-color property to red.
//If you wanted to start from the bottom of a list, you could use
//a negative index(-0) ...
//For example:
$( "li" ).eq( -2 ).css( "background-color", "blue" );
//if you select a list item that is not availabe, than nothing can be applied
//until that list item becomes available or is created.
//If you anticipate a large list, you could specify the max number of list items
//that you want this property applied to. For example, if I only have
//the list items above, but anticipate 20 items, I might apply this property
//to a specifice list item at a further date, but I definately know that when
//that list hits 20, it will have a orange background.
$( "li" ).eq( 5 ).css( "background-color", "orange" );
//Example:
<!doctype html>
<html lang="en">
<head> <meta charset="utf-8"> <title>eq demo</title> <style>//imbeds a css file div {//this selects all the divs and is a selector width: 60px;//the width property is set to 60px height: 60px; margin: 10px; float: left;//this property has a value of left border: 2px solid blue;//multiple values are being applied to make a border } .blue { background: blue;//here is the property this class adds } </style> //end the imbedded css <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>//Parent //children whom are siblings <div class='red'></div> <div class='green'></div> <div class='blue'></div> <div class='orange'></div> <div class='brown'></div> <div class='white'></div>
<script>
//below will add a white class to the div with a predefined class of blue
$( "body" ).find( "div" ).eq( 2 ).addClass( "white" );
//below will add the purple class to the div that has the class of orange
$("body").fine("div").eq(-2).addClass("purple");
</script>
</body>
</html>
//comment if you have any questions--any donations are appreciated, id love
//to do this full time, but work as a cook to pay the bills---God BlessSource : | Last Update : Sun, 16 Oct 22