Jquery 里的节点遍历(next(),perv(),nextAll(),prevAll())

最新推荐文章于 2023-07-24 13:00:44 发布

lyq5655779

最新推荐文章于 2023-07-24 13:00:44 发布

阅读量6.1k

点赞数

分类专栏： JQUERY 文章标签： jquery function div

本文链接：https://blog.csdn.net/lyq5655779/article/details/7192877

版权

JQUERY 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1.节点遍历

<div>
 <ul>
  <li>111</li>
    <li>222</li>
      <li>333</li>
        <li>444</li>
          <li>555</li>
        <li>焦</li>
 </ul>
</div>

   $(function(){
     $("li").click(function(){
        $(this).css("background","red");
        //$(this).next().css("background","yellow");//下一个兄弟元素
        //$(this).nextAll().css("background","yellow")//下面所有的兄弟元素
        $(this).prev().css("background","yellow");//上面的第一个兄弟元素
           $(this).prevAll().css("background","yellow");//上面的所有的兄弟元素
        //$(this).siblings().css("background","yellow");//全部兄弟元素
     })
   
    });

2.评分控件:

<table><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>

 $(function(){
      $("td").mouseover(function(){
          $(this).html("★");
          $(this).prevAll().html("★");
          $(this).nextAll().html("☆");
      });
      $("td").mouseout(function(){
        $(this).html("☆");
        $(this).siblings().html("☆");
        //$(this).html("☆").siblings().html("☆");简写
      });
    });