Css Select或 - Select 所有兄弟姐妹直到某个兄弟姐妹

Question

我们希望避免在我们的代码中过度使用 class。

我们有以下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>

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

仅使用 css select 或吗？

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

更新：

尽管需要一个 selector，这确实有效，但我需要将它放在 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

您可以使用 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

Answer 4

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

对于示例添加到它，.hasClass()

Css Select或 - Select 所有兄弟姐妹直到某个兄弟姐妹

Css Selector - Select all siblings until a certain sibling

css

jquery

css-selectors