Select all elements between two known elements by

2019-05-14 05:54发布

问题:

I have two elements with defined ids having any html between them, for example:

<div id='d1'>Hello</div>

<!-- Here come any html code -->
<div>Example</div><hr/><a href="">Example</a>

<div id='d2'>World</div>

Is there CSS selector that selects all the elements between #d1 and #d2?

回答1:

Answer: No.

But you always have the option of JQuery:

$('#id').nextUntil('#id2')

Keep in mind, the .nextUntil method selects all elements in between, exclusive. To select the elements including the two elements, use this:

$('#id').nextUntil('#id2').andSelf().add('#id2')

<!DOCTYPE html>
<html>
<head>
<style>
.siblings * { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("li.start").nextUntil("li.stop").css({"color": "red", "border": "2px solid red"});
  
    $("li.start1").nextUntil("li.stop1").andSelf().add("li.stop1").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

    <p>Just selecting all elements in between, exclusive.</p>
  
<div style="width:500px;" class="siblings">
  <ul>ul (parent)  
    <li>li (sibling)</li>
    <li>li (sibling)</li>
    <li class="start">li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li class="stop">li (sibling with class name "stop")</li>
  </ul>   
</div>
  
  <p>Just selecting all elements in between, inclusive.</p>
  
<div style="width:500px;" class="siblings">
  <ul>ul (parent)  
    <li>li (sibling)</li>
    <li>li (sibling)</li>
    <li class="start1">li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li class="stop2">li (sibling with class name "stop")</li>
  </ul>   
</div>

</body>
</html>

In my opinion, that's the easiest option.