循环直到遇到一个班级然后做某事答案

【问题标题】：loop until meet a class then do something循环直到遇到一个班级然后做某事
【发布时间】：2015-07-17 14:50:03
【问题描述】：

如何使用循环使p 到class="here" 的所有颜色变为红色？

<p>1</p>
<p>2</p>
<p>3</p>
<p class="here">4</p>
<p>5</p>

.here {
    border:1px solid;
}
p {
    color:blue;
    display:inline-block;
}

【问题讨论】：

【解决方案1】：

尝试在 :not() 排除选择器，返回过滤后的集合

$("p:not(.here, .here ~ p)").css("color", "red");

.here {
    border:1px solid;
}
p {
    color:blue;
    display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p class="here">4</p>
<p>5</p>

【讨论】：

【解决方案2】：

这样的？：

$('p').prevUntil('.here').css('color', 'red');

如果您只想更改特定元素，您可以添加第二个参数：

$('p').prevUntil('.here', 'p').css('color', 'red');

函数prevUntil() 将选择元素的所有先前兄弟元素，不包括与选择器匹配的元素。

参考

【讨论】：

【解决方案3】：

可能有更好的方法，但这会奏效：

$('p:eq(0)').addClass('red').nextUntil('.here').addClass('red');

.red{
    
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p class="here">4</p>
<p>5</p>

【讨论】：

【解决方案4】：

如果你知道索引，你可以使用小于运算符lt(index)

$('p:lt(4)').css('color', 'red');

【讨论】：

【解决方案5】：

document.getElementsByTagName("p")[3].setAttribute('class','here');

或

document.getElementById("container").getElementsByTagName("p")[3].setAttribute('class','here');

css:

.here{
    color:red;
}

【讨论】：

【解决方案6】：

可以获取.here索引并使用lt：

$('p:lt(' + $('p.here').index() + ')').css('color', 'red');

【讨论】：