循环直到遇到 class 然后做点什么

Question

如何使用循环将所有 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;
}

Answer 1

是这样的吗？ :

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

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

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

函数 prevUntil() 将 select 元素的所有先前兄弟姐妹，不包括与 selector.

匹配的元素

参考

Answer 2

可能有更好的方法，但这行得通：

$('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>

Answer 3

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

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

Answer 4

您可以获得 .here 索引并使用 lt:

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

Answer 5

尝试在 :not() 处排除选择器，return 筛选集合

$("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>

Answer 6

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

或

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

css:

.here{
    color:red;
}

loop until meet a class then do something