jQuery 遍历 - 祖先

来源:互联网 发布:openstack ubuntu镜像 编辑:程序博客网 时间:2024/06/06 02:57
<!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>
0 0