将CSS样式添加到jQuery中的单个元素
[英]Add css style to single element in jQuery
问题描述
$(".className")返回所有具有类.className的元素，我只想向特定元素添加样式，即我想使用其索引号访问元素。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>
<script>
console.log($(".para"));
// console.log($(".para")[0].css({"color":"red"}));
</script>
</body>
</html>
在这段代码中，如何在第一段中添加红色，在第二段中添加黄色
6 个解决方案
解决方案1
3 已采纳 2018-06-08 05:10:15
当您执行$(".para")[0] ，您会得到一个dom元素，而不是一个jquery元素。 您需要使用$($(".para")[0])再次将其转换为jquery元素，然后只有您可以使用jquery css方法更改其样式。
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <p class="para">first paragraph </p> <p class="para">Second paragraph </p> <p class="para">Third paragraph </p> <script> $($(".para")[0]).css({"color":"red"}); $($(".para")[1]).css({"color":"yellow"}); </script> </body> </html>
解决方案2
3 2018-06-08 05:12:44
您可以使用jQuery .eq()获取元素并为此元素更新任何内容
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <p class="para">first paragraph </p> <p class="para">Second paragraph </p> <p class="para">Third paragraph </p> <script> $(".para").eq(0).css({"color":"red"}); $(".para").eq(1).css({"color":"yellow"}); </script> </body> </html>
要么
您可以使用以下单个语句
$(".para").eq(0).css({"color":"red"}).end().eq(1).css({"color":"yellow"});
解决方案3
0 2018-06-08 05:09:52
你可以这样使用
https://codepen.io/creativedev/pen/yEVgGg
<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>
$(".para:eq( 0 )").css('color', 'red');
$(".para:eq( 1 )").css('color', 'yellow');
解决方案4
0 2018-06-08 05:18:34
如果没有事件会触发更改，则可以仅使用css伪选择器（例如first-of-type和nth-child(childIndex)
.para:first-of-type { color: red; } .para:nth-child(2) { color: yellow; } .para:nth-child(3) { color: green; }
<p class="para">first paragraph </p> <p class="para">Second paragraph </p> <p class="para">Third paragraph </p>
解决方案5
0 2018-06-08 05:19:15
使用addClass（），使用的参数是索引和类名； 检查代码段：D
function addClass(index, classname){ var el = jQuery('.para'); el[index].classList.add(classname); console.log(el[index]); } addClass(1, 'active');
.active{ color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <p class="para">first paragraph </p> <p class="para">Second paragraph </p> <p class="para">Third paragraph </p>
解决方案6
0 2018-06-08 06:12:49
$(".para").eq(0).css({"color":"yellow"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="para">first paragraph </p>`enter code here` <p class="para">Second paragraph </p> <p class="para">Third paragraph </p>
jQuery为元素添加样式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.