javascript - How to apply style to a specific element in JQuery array -


i learning basics of jquery, , can't solve problem: given 3 green <li> elements turn 1-st , 3-rd elements red color, , 2-nd element orange.

code:

<!doctype html> <html>   <head>     <title>element</title>     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>     <meta http-equiv="content-type" content="text/html;charset=utf-8" >     <style type="text/css" media="screen">       ul li{color: green;}     </style>   </head>   <body>     <ul>       <li>text 1</li>       <li>text 2</li>       <li>text 3</li>     </ul>     <script>       var lis = $("ul li").css("color", "red");     </script>   </body> </html> 

i able make elements red, can't make 2-nd orange: lis[1].css("color", "orange"); doesn't work.

you calling css on dom object instead of jquery object indexer [] gives dom object need eq() instead of indexer

live demo

lis.eq(1).css("color", "orange"); 

description: reduce set of matched elements 1 @ specified index.

you can use :eq() directly in selector

$("ul li:eq(1)").css("color", "red"); 

Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -