Jquery - селектор для nth-child и следующих 2-х детей? - PullRequest
Новая
       0

Jquery - селектор для nth-child и следующих 2-х детей?

0 голосов
/ 07 сентября 2011

У меня довольно стандартный UL, и я пытаюсь циклически перебирать дочерний LI в наборах по три, но я изо всех сил пытаюсь заставить селектор правильно выбрать n-го ребенка, а затем следующий два родных брата LI.

Я думал что-то вроде ... 

var start_index = 1; //start with the first <li>

$("li:nth-child("+start_index+"), li:nth-child("+start_index+1+"), li:nth-child("+start_index+2+")")

но я явно упускаю суть n-го ребенка, поскольку ЛИ, который он выбирает, повсюду!

Ответы [ 4 ]

1 голос
/ 07 сентября 2011

Из Ссылка CSS 3 : 

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree

Что вы могли бы сделать, это определить несколько селекторов: 

li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+3)

Предполагая, что вы хотите сопоставить элементы3, 7-9, 13-15 ... (чередование групп по три)

1 голос
/ 07 сентября 2011

Попробуйте этот код 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Style</title>
  <style type="text/css">
  button { display:block; font-size:12px; width:100px; }
  div { float:left; margin:10px; font-size:10px; 
        border:1px solid black; }
  span { color:blue; font-size:18px; }
  #inner { color:red; }
  td { width:50px; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
<body>
<h2>Change color using jQuery for this list</h2>
<ul id="Mylist">
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>

<ul id="OtherOne">
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>
<script type="text/javascript">
var index=1
$('#Mylist li:nth-child('+index+')')
.css("background", "#ff0000")
.nextAll("li").slice(0, 2)
//.nextUntil('#Mylist li:nth-child('+(index+3)+')')
.css("background", "#ff0000");


</script>

</body>
</html>
0 голосов
/ 07 сентября 2011

WORKING DEMO 

var li = $("ul.list li");

for(var i = 0; i < li.length; i+=3) {
  li.slice(i, i+3).wrapAll("<li><ul class='new'></ul></li>");
}

$(".new:odd").css("background-color", "#efc");

Чтобы инвертировать результат, вы можете использовать :even селектор вместо :odd.

0 голосов
/ 07 сентября 2011

Будет ли это работать для вас? 

var $lis = $("li:nth-child("+start_index+")"); // Just one li
$lis.add($nth.nextAll("li").slice(0, 2)); // Added its next two siblings

// Now $lis holds (up to) three lis
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...