通过CSS选择器选择两个已知元素之间的所有元素 [英] Select all elements between two known elements by CSS selector
本文介绍了通过CSS选择器选择两个已知元素之间的所有元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个元素，定义的id在它们之间有任何html，例如：
< div id ='d1 '> Hello< / div>
<！ - 这里有任何html代码 - >
< div>示例< / div>< hr />< a href =>示例< / a>
< div id ='d2'>世界< / div>是否有CSS选择器选择＃d1和＃d2之间的所有元素？
b $ b 解决方案回答：不。
但你总是可以选择JQuery： p>
$（'＃id'）。nextUntil（'＃id2'）
请记住， .nextUntil 方法选择之间的所有元素，独占。 em>要选择包含两个元素的元素，请使用： $（'＃id'）。nextUntil id2'）。andSelf（）。add（'＃id2'）
<！DOCTYPE html>< html>< head>< style> .siblings * {display：block; border：2px solid lightgrey;颜色：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：红色}）; $（li.start1）。nextUntil（li.stop1）andSelf（）。add（li.stop1）。css（{color：red ：2px solid red}）;}）;< / script>< / head>< body& < p>只需选择之间的所有元素，即可。< / p> < div style =width：500px; class =siblings> < ul> ul（parent）< li> li（sibling）< / li> < li> li（兄弟姐妹）< / li> < li class =start> li（同级别名称为start）< / li> < li> li（类别名称为start的li的下一个同级）< / li> < li> li（类别名称为start的li的下一个同级）< / li> < li> li（类别名称为start的li的下一个同级）< / li> < li class =stop> li（类别名称为stop的兄弟姐妹）< / li> < / ul> < / div> < p>只需选择两者之间的所有元素即可。< / p> < div style =width：500px; class =siblings> < ul> ul（parent）< li> li（sibling）< / li> < li> li（兄弟姐妹）< / li> < li class =start1> li（同级别名称为start）< / li> < li> li（类别名称为start的li的下一个同级）< / li> < li> li（类别名称为start的li的下一个同级）< / li> < li> li（类别名称为start的li的下一个同级）< / li> < li class =stop2> li（类别名称为stop的兄弟姐妹）< / li> < / ul> < / div>< / body>< / html>
在我看来，这是最简单的选择。
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?
解决方案 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.
这篇关于通过CSS选择器选择两个已知元素之间的所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
