最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin3浏览0评论

I am learning the basics of JQuery, and can't solve this problem: given 3 green <li> elements turn 1-st and 3-rd elements to red color, and the 2-nd element to orange.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>element</title>
    <script src=".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 was able to make all the elements red, but I can't make the 2-nd orange: lis[1].css("color", "orange"); doesn't work.

I am learning the basics of JQuery, and can't solve this problem: given 3 green <li> elements turn 1-st and 3-rd elements to red color, and the 2-nd element to orange.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>element</title>
    <script src="http://ajax.googleapis./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 was able to make all the elements red, but I can't make the 2-nd orange: lis[1].css("color", "orange"); doesn't work.

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Apr 14, 2014 at 10:35 user4035user4035 23.8k11 gold badges65 silver badges101 bronze badges 1
  • 1 Does this answer your question? $(element)[index].addClass(); does not work – Sebastian Simon Commented Jul 5, 2021 at 16:06
Add a ment  | 

5 Answers 5

Reset to default 7

You are calling css on DOM object instead of jQuery object as indexer [] gives you DOM object You need eq() instead of indexer

Live Demo

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

Description: Reduce the set of matched elements to the one at the specified index.

You can also use :eq() directly in the selector

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

You can achieve it with pure CSS by applying :nth-child selector:

ul li:nth-child(2) {
    color: red;
}

Fiddle Demo

Since you are learning jQuery, you can use the :even selector:

var lis = $('ul li');
lis.filter(':even').css('color', 'red'); // Zero based indexing selects 0 and 2
lis.filter(':odd').css('color', 'orange'); // Selects 1

Note, from the docs:

Because :even is a jQuery extension and not part of the CSS specification, queries using :even cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :even to select elements, first select the elements using a pure CSS selector, then use .filter(":even").

please write your code in document.ready() and use eq

for all element

 $(document).ready(function(){
     $("ul li").css("color", "red");
    });

for particluar element

 $(document).ready(function(){
    $("ul li:eq(0)").css("color", "red"); //for first element
    $("ul li:eq(1)").css("color", "red");//for second element
    $("ul li:eq(2)").css("color", "red");//for third element
});

If you want to select only first element than use this...

use CSS pesudo selector :first-of-type

$("li:first-of-type").css("color","orange");

or you can use jQuery built in selector

$("li:first").css("color","orange");

Both will work fine...but the jQuery method is relatively slower than CSS pesudo selector so use the first one for better performance

now if you want to select any other index then use .eq()

$(selectorName.eq(index)).css(...);

发布评论

评论列表(0)

  1. 暂无评论