Javascript (jQuery): next() выдает мне "li.next()" вместо "li"

#jquery #selector #next

#jquery #селектор #Далее

Вопрос:

Запутанный заголовок, да? Я попытался объяснить это как можно лучше.

Я имею в виду, если у меня есть меню, подобное этому:

 <ul>
    <li> Home </li>
    <li class="current"> Portfolio </li>
    <li> Store </li>
    <li> About </li>
</ul>

и используйте метод .next(), чтобы получить следующий элемент ИЗ текущего:

 $('ul li.current').next()

селектор результатов является:

 ul li.current.next()

вместо реального селектора. Я имею в виду, я не могу настроить таргетинг ul li.current.next() с помощью CSS (и, следовательно, это не «настоящий» селектор). Реальный селектор выглядел бы так ul li .

Есть ли какой-нибудь способ получить «реальный» селектор следующего элемента?

1. можете ли вы показать больше js, чем это?

2. В чем проблема? Вы хотите получить эквивалентный селектор CSS?

3. Если вы это сделаете var test = $('#ul li'); alert(test.html()); test = test.next(); alert(test.html()); , сработает ли это так, как ожидалось? Я думаю, что ваш селектор слишком узок для корректной работы.

Ответ №1:

Если вам нужен эквивалентный селектор CSS, это было бы:

 ul li.current   li

Смотрите: Смежный селектор-побратим

Не поддерживается в IE6 Примечание:.

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

Например. вы никогда не сможете сопоставить $('td').closest('tr') с CSS, поскольку вы не можете «двигаться вверх» с помощью CSS.

Я надеюсь, что это ответ на ваш вопрос, если нет, пожалуйста, уточните его.

1. это круто, не знал, что ты можешь это сделать, все еще изучая css, хотя хаха ie6 bahh

2. Оказывается, мне не нужно было делать это таким образом, но мне все еще нужно было знать, как это сделать, и ваше решение сработало. Спасибо! (и я прекратил поддерживать IE6 месяцев назад, так что не беспокойтесь об этом!)

Ответ №2:

$('ul li.current').next() просто вернет следующий <li> . Он вернет

 <li> Store </li>

Ответ №3:

Это работает:

 $(document).ready(function() {
  var $li = $("ul li.current").next();
  $li.css("font-weight", "bold");
});

Или вы можете пропустить назначение var и получить к нему доступ следующим образом:

 $("ul li.current").next().css("text-decoration", "underline");