jQuery 7 节点遍历
生活随笔
收集整理的這篇文章主要介紹了
jQuery 7 节点遍历
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery提供了非常好的方法去遍歷節點 :
next("過濾元素"):用于獲取節點之后緊臨的第一個同輩元素。如:$(".myclass").next("div")->獲取所有引用myclass樣式后的第一個div元素。
nextAll("過濾元素"):用于獲取節點之后的所有同輩元素。$(".myclass").nextAll("div")->獲取所有引用myclass樣式后的所有div元素.
siblings("過濾元素"):用于獲取所有的兄弟(同輩)元素. $(".myclass").siblings("li")->獲取所有引用myclass樣式的兄弟li節點
實例1(運行時把jQuery代碼一個個執行就可看到效果)
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script src="JScript/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript">$(function () {$("div").click(function () {alert($(this).next("div").text()); //顯示同輩下個節點的名稱alert($(this).next().text()); //顯示div后面第一個p的值,如果div后沒有p,則它顯示空alert($(this).nextAll("div").text());//顯示所有選擇之后div的值$.each($(this).nextAll(), function () {$(this).css("background", "red"); //設置所選擇的后面的所有元素css })$(this).nextAll().css("background", "red");//自動迭代$(this).css("background", "red"); $(this).siblings("div").css("background", "green"); //點選的為紅色,其它為綠色$(this).css("background", "red").siblings("div").css("background","white");alert($(this).siblings("p").text());//所有同輩元素,不加p過濾器,就會把所有的加上 })});</script> </head> <body> <div>aaaa</div> <div>bbb</div> <div>cccc</div> <p>p1</p> <p>p2</p> <p>p3</p> <div> dddd<input type="text" value="hihi" /><input type="button" value="click" /> </div> <div>eee</div> <div>fffff</div> </body> </html>?
轉載于:https://www.cnblogs.com/yagzh2000/archive/2013/05/25/3098820.html
總結
以上是生活随笔為你收集整理的jQuery 7 节点遍历的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Windows 7 Natvie VHD
- 下一篇: 备份几个网址