JQuery获取子孩子和兄弟元素的方法
这里说的获取当前元素的子孩子和兄弟元素的方法,另外还有遍历和指定的具体要求:
01.html代码:
<!DOCTYPE html> <html> <head> <title>测试jquery</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="01.css"/> <script type="text/javascript" src="../test1/JQuery/jquery.js"></script> <script type="text/javascript" src="01.js"></script> </head> <body> <input type="button" value="测试1" id="button_1"> <input type="button" value="测试2" id="button_2"><br/> <div id="div1" class="div_1"> This is div1 </div> <div id="div2" class="div_2"> This is div_2 <div id="div_2_1" class="div_2_1"> This id div2_1 </div> <div id="div2_2" class="div_2_2"> This id div2_2 </div> <div id="div2_3" class="div_2_3"> This id div2_3 </div> </div> <div id="div3" class="div_3"> This is div_3 </div> </body> </html>01.css
body{ background-color: #efefef; } .div_1,.div_2,.div_2_1,.div_2_2,.div_2_3,.div_3{ position: absolute; } .div_1{ width: 200px; height: 200px; background-color: red; } .div_2{ width: 300px; height: 700px; background-color: yellow; margin-left: 250px; } .div_2_1{ width: 200px; height: 200px; background-color: black; margin: 10px 0px 0px 50px; } .div_2_2{ width: 200px; height: 200px; background-color: green; margin: 220px 0px 0px 50px; } .div_2_3{ width: 200px; height: 200px; background-color: blue; margin: 430px 0px 0px 50px; } .div_3{ width: 200px; height: 200px; background-color: white; margin: 0px 0px 0px 600px; }利用外部js文件的方式来处理如下:
01.js
$(document).ready(function(){ $("#button_1").click(function(){ //所谓的子孩子就是当前元素的子代 $('.div_2').children().each(function(){ window.alert($(this).text()); }); //下面是指定第几个子孩子 //alert($(".div_2").children().eq(0).text()); }); $("#button_2").click(function(){ //同辈元素的获取 //$('.div_1').nextAll().each(function(){ //window.alert($(this).text()); alert($(".div_2").nextAll().eq(0).text()); }); $("#button_3").click(function(){ //获取div_1前面的所有的兄弟元素 /*$(".div_3").prevAll().each(function(){ alert($(this).text()); }); */ //获取.div的前面的第几个元素的内容 alert($(".div_2").prev().eq(0).text()); }); $("#button_4").click(function(){ $(".div_1").siblings().each(function(){ alert($(this).text()); }); }); });
以上是关于获取子元素和兄弟元素的具体方法,仅供参考
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。