Могу ли я сделать повторный jQuery next () по циклу for?


Я хочу выбрать некоторые родственные элементы. Поэтому я использовал jQuery .next () но я не знаю, как повторить.

// Repeat 3 times
$('#after').next().addClass('selected');
$('#after').next().next().addClass('selected');
$('#after').next().next().next().addClass('selected');
.selected {
	color: red;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li id="after" data-num="3">3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>		
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Как я могу сделать повторный jQuery next () как заданное значение цикла for, как это? (конечно, это не работает.)

$('#after')
  for(var i=0; i<$('#after').data('num'); i+=1){
    .next().addClass('selected')
  }
;
1 3

1 ответ:

Вместо next() Используйте nextAll()

$('#after').nextAll("li").addClass('selected');

Вам не нужно перебирать все элементы. nextAll() выделит все элементы sibling вплоть до исходного элемента в дереве DOM.

Если вы хотите обойтись без зацикливания операторов, то вы должны сделать это, как,

var srcElem = $("#after");
var srcIndex = srcElem.index() + 1; 
var index = +srcElem.data("num");
secElem.closest("ul")
         .find("li:gt("+ (index-1) +"):lt("+ (srcIndex + index) +")")
           .addClass('selected');    

Использование цикла будет лучшим подходом здесь, но используйте его оптимизированным способом,

 var src = $('#after');
 for (var i = 0, len = +src.data('num'); i < len; i++) {
   src = src.next("li").addClass('selected');
   if (!src.length) { break; }
 }

Демо