兄弟要素をいくつか選択したいと思います。そのため、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>このように、forループによって指定された値として繰り返されるjQuery next（）を作成するにはどうすればよいですか？（もちろん、これは機能していません。）
$('#after')
for(var i=0; i<$('#after').data('num'); i+=1){
.next().addClass('selected')
}
;
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; }
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加