Использование свойства .css в jQuery

Question

Code 1

jQuery("ul#leftmenuacc").find("span.leftmenutextspan")[0].css('color', 'red');

Приведенный выше код не работает, поэтому мне пришлось сделать это по-другому [ниже указано]

Code 2

jQuery("ul#leftmenuacc").find('span.leftmenutextspan').each(function(index){ if(index ==0) jQuery(this).css('color', 'red') });

Я запутался здесь, почему не работает Code 1? Я прочитал документацию по .css из Документов Jquery , но не смог найти то, что мне не хватает.

Есть ли элегантный способ сделать это? Потому что в настоящее время я перебираю множество элементов DOM без толку.

Answer 1

Когда вы делаете $(selector)[0], вы получите HTMLElement, который не имеет функции css. Вы можете обернуть его с помощью jQuery, например: $($(selector)[0]), но лучшим решением будет использование селектора :eq(0) или :first:

jQuery("ul#leftmenuacc").find("span.leftmenutextspan:eq(0)").css('color', 'red');

Answer 2

Все остальные ответы дают рабочие решения. Если производительность не является для вас совершенно неважной, следует также учитывать следующее:

1. Воздержитесь от использования :eq (или :first, как предлагается в некоторых других ответах) селекторов всякий раз, когда сможете.

   Обычно jQuery использует собственный метод обхода DOM браузера querySelectorAll(), который значительно быстрее, чем jQuery, самостоятельно анализирующий дерево DOM.

   Поскольку :eq и :first зависят от jQuery, querySelectorAll() использовать нельзя - поэтому jQuery вынужден прибегнуть к использованию своего собственного, гораздо более медленного движка обхода.

   Рекомендованной альтернативой для этого сценария является использование методов jQuery filter() или first() (которые, внутренне, сопоставляются с filter()):

   jQuery("ul#leftmenuacc").find("span.leftmenutextspan").first().css('color', 'red');
   

   Цитировать Собственная документация jQuery по :first:

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

   Для достижения максимальной производительности при использовании: сначала выберите элементы, сначала выберите элементы с помощью чистого селектора CSS, а затем используйте .filter (": first").

   Какую скорость вы набираете? Ну, .first() примерно в 10 раз быстрее :first в стандартных сценариях.

2. Использование find() в вашем примере кажется ненужным и замедляет ваш код по той же причине, что и упомянутая выше. Это будет лучшая альтернатива:

   jQuery("ul#leftmenuacc span.leftmenutextspan").first().css('color', 'red');
   

Answer 3

в коде 1 вы пропускаете двойные кавычки (") после ul#leftmenuacc

и я бы сделал это так

$("span.leftmenutextspan:first", "ul#leftmenuacc").css('color', 'red');

Answer 4

jQuery("ul#leftmenuacc").find("span.leftmenutextspan:first").css('color', 'red');