jquery prev 函数实例
程序员文章站
2022-04-10 20:26:58
...
prev() 函数被用来匹配元素集的前一个兄弟元素,仅仅只有前一个兄弟元素被选择,其子元素将被忽略。
prev() 函数可以允许通过选择器来过滤,例如 prev(‘p’) 被用来选择匹配元素的前一个元素是兄弟元素的p元素。
具体实例代码:
<html> <head> <title> prev() example </title> <style type="text/css"> p,p{ width:110px; height:40px; margin:2px 8px 2px 8px; float : left; border:1px blue solid; } </style> <script type="text/javascript" src="../jquery-1.11.1.min.js"> </script> </head> <body> <h1>jquery prev() example</h1> <p> this is p 1 <p>p 1 child</p> </p> <p>this is paragraph 1</p> <p> this is p 2 <p>p 2 child</p> </p> <p id="start"> this is p 3 <p>p 3 child</p> </p> <br/><br/><br/> <br/><br/> <button id="prevButton1">prev()</button> <button id="prevButton2">prev("p")</button> <button id="prevButton3">prev("p")</button> <button id="reset">Reset</button> <script type="text/javascript"> var $currElement=$("#start"); $currElement.css("background","red"); $("#prevButton1").click(function(){ if(!$currElement.prev().length){ alert("no element found"); return false; } $currElement=$currElement.prev(); $("p,p").css("background",""); $currElement.css("background","red"); }); $("#prevButton2").click(function(){ if(!$currElement.prev("p").length){ alert("no element found"); return false; } $currElement=$currElement.prev("p") $("p,p").css("background",""); $currElement.css("background","red") }); $("#prevButton3").click(function(){ if(!$currElement.prev('p').length){ alert("no element found"); return false; } $currElement=$currElement.prev('p'); $("p,p").css("background",""); $currElement.css("background","red"); }); $("#reset").click(function () { location.reload(); }); </script> </body> </html>
效果:
以上就是jquery prev 函数实例的详细内容,更多请关注其它相关文章!
上一篇: jquery 实现的复选框全选与反选
下一篇: 在CSS实现Footer置底的几种方式