logo标签列表

在jQuery中为单个元素添加CSS样式

javascriptjquerycssjquery-uistyling
3

$(".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个回答
3
你可以使用 jQuery 的 .eq() 方法获取元素并更新该元素的任何内容。 https://api.jquery.com/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
当你执行 $(".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>

0

你可以像这样使用

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');
0
如果没有触发更改的事件，可以仅使用 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>

0

使用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>

0

 $(".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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接