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
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
Post a Comment