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>

摆弄here

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

4 个答案: