如何将样式应用于 JQuery 数组中的特定元素
[英]How to apply style to a specific element in JQuery array
问题描述
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.
我正在学习 JQuery 的基础知识，但无法解决这个问题：给定 3 个绿色<li>元素，将第 1 个和第 3 个元素变为红色，将第 2 个元素变为橙色。
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 was able to make all the elements red, but I can't make the 2-nd orange: lis[1].css("color", "orange");我能够使所有元素变为红色，但不能使第二个橙色： lis[1].css("color", "orange"); doesn't work.不起作用。
5 个解决方案
解决方案1
7 已采纳 2014-04-14 10:36:42
You are calling css on DOM object instead of jQuery object as indexer [] gives you DOM object You need eq() instead of indexer您在 DOM 对象上调用 css 而不是 jQuery 对象，因为 indexer []为您提供 DOM 对象您需要eq()而不是 indexer
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您也可以直接在选择器中使用:eq()
$("ul li:eq(1)").css("color", "red");
解决方案2
3 2014-04-14 10:38:48
You can achieve it with pure CSS by applying :nth-child selector:您可以通过应用:nth-child选择器来使用纯 CSS 实现它：
ul li:nth-child(2) {
color: red;
}
解决方案3
1 2014-04-14 10:40:10
Since you are learning jQuery , you can use the :even selector :由于您正在学习jQuery ，您可以使用:even选择器：
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.
解决方案4
1 2014-04-14 10:42:13
please write your code in document.ready() and use eq请在document.ready() 中编写您的代码并使用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
});
解决方案5
0 2019-07-05 20:18:38
If you want to select only first element than use this...如果您只想选择第一个元素而不是使用此...
use CSS pesudo selector :first-of-type使用 CSS 伪选择器 :first-of-type
$("li:first-of-type").css("color","orange"); $("li:first-of-type").css("color","orange");
or you can use jQuery built in selector或者您可以使用 jQuery 内置选择器
$("li:first").css("color","orange"); $("li:first").css("颜色","橙色");
Both will work fine...but the jQuery method is relatively slower than CSS pesudo selector so use the first one for better performance两者都可以正常工作……但是 jQuery 方法比 CSS 伪选择器相对慢，所以使用第一个以获得更好的性能
now if you want to select any other index then use .eq()现在，如果您想选择任何其他索引，请使用 .eq()
$(selectorName.eq(index)).css(...); $(selectorName.eq(index)).css(...);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.