通过 CSS 选择器选择两个已知元素之间的所有元素

问题描述 投票：0回答：2

我有两个已定义 id 的元素，它们之间有任何 html，例如：

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

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

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

是否有CSS选择器可以选择#d1和#d2之间的所有元素？

css-selectors
2个回答
2
投票

答案：不会。

但是您始终可以选择 JQuery：

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

请记住，

.nextUntil
方法选择之间的所有元素，不包括。要选择包含这两个元素的元素，请使用以下命令：

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

在我看来，这是最简单的选择。

0
投票

我是与 CSS 相关的问题的新手，但我试图找到同一问题的答案，看起来有一种方法可以在不使用 jQuery 的情况下实现它：

#d1~:not(#d2, #d2~*)

我附上一个简单的 html 页面来测试这个解决方案。警告！该代码片段使用 

alert
显示选择结果。

let selectionQuery = document.querySelectorAll("#d1~:not(#d2, #d2~*)");

let selectedElementsCount = selectionQuery.length;
for (let selectedElementIndex = 0; selectedElementIndex < selectedElementsCount; selectedElementIndex++) {
  let tempElement = selectionQuery[selectedElementIndex]
  alert("tempElement.outerHTML: " + tempElement.outerHTML);
}
<!DOCTYPE html>
<html>

    <meta charset="UTF-8">

    <head>
        <title>Select everything between #d1 and #d2</title>
    </head>

    <body>
  

        <span>Something which shouldn't be chosen, because it's before the 1st element</span>

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

        <img src="http://some.image.com"/>

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

        <span>Other text which sholdn't be chosen, because it's after the last element</span>
    </body>

</html>

如果解决方案确实符合您最初的要求，那么我认为为您的问题选择新的正确答案是正确的（因为我和数千名其他开发人员正在寻找相同的问题，而他们只看到了第一个）回答说不可能）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.