Как применить стиль к определенному элементу в массиве JQuery

Question

Как применить стиль к определенному элементу в массиве JQuery

0

Я изучаю основы JQuery и не могу решить эту проблему: учитывая, что 3 зеленых элемента <li> превращают 1-й и 3-й элементы в красный цвет, а 2-й элемент - оранжевый.

Код:

<!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>

Я смог сделать все элементы красными, но я не могу сделать 2-й апельсин: lis[1].css("color", "orange"); не работает.

user4035 14 апр. 2014, в 12:41

Источник

Теги:

javascript

jquery

html

5 ответов

3

Вы можете добиться этого с помощью чистого CSS, применяя :nth-child селектор :nth-child:

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

Демо-версия скрипта

Felix 14 апр. 2014, в 09:10

1

напишите свой код в документе.ready() и используйте eq

для всех элементов

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

для особого элемента

 $(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
});

Rituraj ratan 14 апр. 2014, в 09:08

1

Поскольку вы изучаете jQuery, вы можете использовать :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

Обратите внимание, что из документов:

Поскольку: даже является расширением jQuery, а не частью спецификации CSS, запросы, использующие: даже не могут воспользоваться повышением производительности, предоставляемым встроенным методом запросов DOM querySelectorAll(). Чтобы добиться максимальной производительности при использовании: даже для выбора элементов, сначала выберите элементы, используя чистый селектор CSS, а затем используйте.filter(": even").

musically_ut 14 апр. 2014, в 08:10

0

Если вы хотите выбрать только первый элемент, чем использовать это...

использовать CSS pesudo селектор: первый в типе

$ ( "Ли: первый-из-типа"). CSS ( "цвет", "апельсин");

или вы можете использовать встроенный селектор jQuery

. $ ( "Ли: первая") CSS ( "цвет", "апельсин");

Оба будут работать нормально... но метод jQuery относительно медленнее, чем CSS-селектор, поэтому используйте первый для повышения производительности.

Теперь, если вы хотите выбрать любой другой индекс, используйте .eq()

. $ (SelectorName.eq (индекс)) CSS (...);

Anurag Verma 05 июль 2019, в 18:51

Ещё вопросы

Adil · Accepted Answer · 2014-04-14T09-04-00.000Z

Вы вызываете css на объект DOM вместо объекта jQuery, поскольку indexer [] предоставляет объект DOM. Вам нужно eq() вместо индексатора

Демо-версия

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

Описание. Уменьшите набор согласованных элементов до единицы по указанному индексу.

Вы также можете использовать : eq() непосредственно в селекторе

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