<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{
display:block;
border:5px solid lightgrey;
color:blue;
padding:8px;
margin:15px;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#span1,#span2").parent().css({"color":"red","border":"2px solid red"});
});
$(document).ready(function(){
$("#span3").parents().css({"color":"red","border":"2px solid red"});
});
$(document).ready(function(){
$("#span4").parents("ul").css({"color":"red","border":"2px solid red"});
});
$(document).ready(function(){
$("#span5").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">(曾祖父)
<ul>ul(祖父)
<li>(直接父)
<span id="span1">span1</span>
</li>
</ul>
</div>
<div style="width:500px">(祖父)
<p>(直接父)
<span id="span2">span2</span>
</p>
</div>
<div style="width:500px;">(曾祖父)
<ul>ul(祖父)
<li>(直接父)
<span id="span3">span3</span>
</li>
</ul>
</div>
<div style="width:500px;">(曾祖父)
<ul>ul(祖父)
<li>(直接父)
<span id="span4">span4</span>
</li>
</ul>
</div>
<div style="width:500px;">(曾祖父)
<ul>ul(祖父)
<li>(直接父)
<span id="span5">span5</span>
</li>
</ul>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
.ancestors *
{
display:block;
border:5px solid lightgrey;
color:blue;
padding:8px;
margin:15px;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#span1,#span2").parent().css({"color":"red","border":"2px solid red"});
});
$(document).ready(function(){
$("#span3").parents().css({"color":"red","border":"2px solid red"});
});
$(document).ready(function(){
$("#span4").parents("ul").css({"color":"red","border":"2px solid red"});
});
$(document).ready(function(){
$("#span5").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">(曾祖父)
<ul>ul(祖父)
<li>(直接父)
<span id="span1">span1</span>
</li>
</ul>
</div>
<div style="width:500px">(祖父)
<p>(直接父)
<span id="span2">span2</span>
</p>
</div>
<div style="width:500px;">(曾祖父)
<ul>ul(祖父)
<li>(直接父)
<span id="span3">span3</span>
</li>
</ul>
</div>
<div style="width:500px;">(曾祖父)
<ul>ul(祖父)
<li>(直接父)
<span id="span4">span4</span>
</li>
</ul>
</div>
<div style="width:500px;">(曾祖父)
<ul>ul(祖父)
<li>(直接父)
<span id="span5">span5</span>
</li>
</ul>
</div>
</div>
</body>
</html>