jquery next函数实例

来源：互联网发布：node.js的适用场景编辑：程序博客网时间：2024/06/06 13:22

next() 函数获得紧跟着匹配元素的下一个兄弟元素标签，仅选择的是兄弟，而非孩子元素。

next() 函数可以允许通过选择器来进行过滤，如next(‘div’)被用来选择紧跟着的div兄弟元素如紧邻的兄弟元素不为div标签，则不会选择任何元素。

具体实例代码：

<html><head><style type="text/css"> div,p{ width:110px; height:40px; margin:2px 8px 64px 8px; float : left; border :1px blue solid;   }</style><script type="text/javascript" src="../jquery-1.11.1.min.js"></script></head><body>         <h1>jquery next() example</h1>         <div id="start">this is div1         <div>div 1 child</div>                  </div>         <p>this is paragrap 1</p>         <div>         this is div2         <div>div2 child</div>         </div>         <div>this is div3         <div>div 3 child</div>         </div>         <br/><br/><br/>                             <br/><br/><br/>              <button id="nextButton1">next()</button>              <button id="nextButton2">next('div')</button>              <button id="nextButton3">next('p')</button>              <button id="reset">Rest</button>              <script type="text/javascript">              var $currElement=$("#start");              $currElement.css("background","red");              $('#nextButton1').click(function(){              if(!$currElement.next().length){              alert("no element found!");              return false;                            }              $currElement=$currElement.next();              $('div,p').css('background',"");              $currElement.css("background","red");                          });              $("#nextButton2").click(function(){              if(!$currElement.next('div').length){              alert("no element found");              return false;                                          }              $currElement=$currElement.next('div');              $("div,p").css("background","");              $currElement.css("background","red");                            });              $("#nextButton3").click(function(){              if(!$currElement.next('p').length){              alert("no element found");              return false;                            }              $currElement=$currElement.next('p');              $('div,p').css("background","");              $currElement.css("background","red");                                          });              $("#reset").click(function(){              location.reload();                            });                            </script></body></html>

效果图：

0 0