Найдите 5-й элемент с указанным классом в списке и добавьте другой класс в jQuery
Я хотел бы addClass "green" к 5-му li.hr в каждом ul контейнеры в моем сайте.
$("ul li.hr").each(function() {
if ($(this).length = 5) {
$(this).addClass("green");
}
});
PS: если его возможное с CSS только, скажите мне как.
Обратите внимание что ul смешал элементы, как:
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">foo</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">foo</li>
Мне нужно 5-е li.hr.
8 ответов
Вы можете сделать это в чистом CSS:
/* set rule: select every li.hr element after the 4th */
ul > li.hr ~ li.hr ~ li.hr ~ li.hr ~ li.hr {
color: green;
}
/* unset rule: select every li.hr element after the 5th */
ul > li.hr ~ li.hr ~ li.hr ~ li.hr ~ li.hr ~ li.hr {
/* reverse the rules set in the previous block here */
color: black;
}
Предостережение: селектор ~ не поддерживается IE6. Прекрасно работает со всем остальным.
$('ul').find('li.hr:nth-child(5)').each(function() {
$(this).addClass("green");
});
Ссылка: Селектор: nth-child
CSS3 предлагает аналогичный селектор, прочтите http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
. например
li.hr:nth-child(5) {
background-color: green;
}
Вы можете сделать это таким образом.
if($("ul li.hr")[4]){
$($("ul li.hr")[4]).addClass("green");
}
Можно использовать nth-child из jquery.
$("ul li.hr:nth-child(5)").addClass("green");
Вам нужен nth-child там:
$("ul li.hr:nth-child(5)").addClass('green');
li.hr:nth-child(5) найдет .hr, который является также пятым ребенком в .hr. Попробуйте:
$('ul').find('li.hr:eq(4)').addClass('green');
Это не единый селектор, но должен сработать для вашего. Для каждого .hr и выбирает пятый.
Рабочий пример: http://jsfiddle.net/Xv6gX/
var lis = $('ul li.hr');
if(lis.length >= 4) {
$(lis[4]).addClass('green');
}
Должен помочь. Я тестировал это в Firebug.
селектор: nth-child работает не так, как вы ожидали, поскольку он не принимает во внимание селектор класса.
Несмотря на распространенное мнение, вы не можете использовать :nth-child здесь, потому что он считает все дочерние элементы, независимо от того, соответствуют они предыдущему селектору или нет. Только после захвата n-го элемента он сравнивает его с селектором, чтобы определить, соответствует ли он ему. Таким образом: ul li.hr:nth-child(5) фактически рассматривается как ul li:nth-child(5).hr. Это может показаться странным, но это строго соответствует спецификации CSS (см. описание jQuery).
К счастью, jQuery предоставляет замечательный псевдокласс :eq(), который позволяет фильтровать по нулевому индексу, и соблюдает предыдущий селектор...
$("ul > li.hr:eq(4)").addClass("green");
Я даже протестировал это, чтобы убедиться, что это работает...
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.green { color:green; font-weight:bold; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul > li.hr:eq(4)").addClass("green");
});
</script>
</head>
<body>
<ul>
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">foo</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">foo</li>
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">foo</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">foo</li>
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">bar</li> <!-- 5th -->
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">foo</li>
</ul>
</body>
</html>