Css选择器 - 选择所有兄弟姐妹直到某个兄弟姐妹

Question

我们希望避免对代码使用过多的类。

我们有以下html结构：

<div id='hello'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id='hello2'></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id='hello3'></div>
<div></div>
<div></div>

例如，我们如何选择#hello之后的所有div，但直到#hello2 ？

这可能只使用css选择器吗？

我们可以使用脚本语言（jquery）来实现吗？

更新：

尽管需要一个选择器，确实有效，但我需要将它放在一个javascript条件中......很抱歉没有提到它并且更清楚。

Answer 1

你不需要JS（也不是jQuery框架），它是CSS的任务。

使用兄弟选择器：

<style>
    #hello ~ div {background: red} /* four divs after #hello will be red */
    #hello2, #hello2 ~ div {background: white} /* reset red background to default, #hello2 and all next will be white */
</style>

https://jsfiddle.net/sgdedg9z/

Answer 2

你可以使用jquery

$( "#hello" ).nextUntil( hello2, "div" )

https://api.jquery.com/nextUntil/

Answer 3

好的，你可以使用nextUntil 。 但是，因为你想要有条件的。 你应该找到一种从中获取布尔值的方法。

例如添加到它， .hasClass()

Answer 4

你可以使用CSS兄弟选择器来获得这个，我认为这比使用脚本更好，因为与脚本相比，css更快。

<style>
    #hello ~ div {background: red} /* four divs after #hello will be red */
    #hello2, #hello2 ~ div {background: white} /* reset red background to default, #hello2 and all next will be white */
</style>

如果你想在jquery中相同

你可以使用下面写的代码

  <script>
    $(document).ready(function(){
    var counter = 0;
    $("#hello").find($("Div").each(function () {
        if(counter < 4)    { //set counter value as you need
           $(this).css("color","red");
        }

    }));
    })
//or


$( "#hello" ).nextUntil( hello2, "div" ).css("color","red")    

    </script>

在这里摆弄