Добавить стиль CSS к одному элементу в jQuery - PullRequest
Новая
       56

Добавить стиль CSS к одному элементу в jQuery

0 голосов
/ 08 июня 2018

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

0 голосов
/ 08 июня 2018 

 $(".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>
0 голосов
/ 08 июня 2018

использовать 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 голосов
/ 08 июня 2018

Если нет события, которое вызовет изменения, это можно сделать, используя только псевдоселектор 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 голосов
/ 08 июня 2018

Вы можете использовать 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"});
0 голосов
/ 08 июня 2018

Когда вы делаете $(".para")[0], вы получаете элемент dom, а не элемент jquery.Вам нужно снова преобразовать его в элемент jquery, используя $($(".para")[0]), тогда только вы можете изменить его стиль, используя метод 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 голосов
/ 08 июня 2018

Вы можете использовать вот так

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');
...