JQ——遍历（each遍历数组遍历）添加（appendappendTo）
Posted Dream
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ——遍历（each遍历数组遍历）添加（appendappendTo）相关的知识，希望对你有一定的参考价值。
jQuery的隐式迭代是对同一类型的元素做了相同的操作，如果想要给同一元素做不同的操作，就要用到遍历
1、each实现遍历操作：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>each实现的遍历</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); }); </script> </head> <body> <button>点击按键，each实现遍历操作</button> <ul> <li>2020</li> <li>新年好！</li> <li>武汉加油！</li> </ul> </body> </html>
2、遍历数组：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数组遍历</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function () { $.each([213,37,34,567,2020], function(index, value) { alert(index + \': \' + value); }); }) </script> </head> <body> </body> </html>
函数中，index代表角标，value代表遍历的每一个元素。
... ...
3、append实现添加操作（在被选元素的末尾添加）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>append实现添加操作</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#button").click(function(){ $("ul").append("<li>武汉加油！</li>"); }); }); </script> </head> <body> <button id="button">append添加</button> <ul> <li>2020</li> <li>新年好！</li> <li>武汉加油！</li> </ul> </body> </html>
4、appendTo实现添加操作：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>appendTo实现添加操作</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#button").click(function(){ $("<li>武汉加油！</li>").appendTo("ul"); }); }); </script> </head> <body> <button id="button">append添加</button> <ul> <li>2020</li> <li>新年好！</li> <li>武汉加油！</li> </ul> </body> </html>
5、empty() 方法：移除被选元素内部的的所有子节点和内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>empty实现移除操作</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#button").click(function(){ $("ul").empty(); }); }); </script> </head> <body> <button id="button">empty移除</button> <ul> <li>2020</li> <li>新年好！</li> <li>武汉加油！</li> <ol>新年快乐！</ol> </ul> </body> </html>
点击按键前：
点击按键后：
ul内部的所有元素被移除，文字部分消失了。
6、remove() 方法：移除相匹配的元素所有的文本和子节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>remove实现移除操作</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#button").click(function(){ $("li").remove(); }); }); </script> </head> <body> <button id="button">remove移除</button> <ul> <li>2020</li> <li>新年好！</li> <li>武汉加油！</li> <ol>新年快乐！</ol> </ul> </body> </html>
点击按键前：
点击按键执行移除操作后：
只剩下ol元素内部的内容，li内部的内容已被移除。
7、案例（省市二级联动）：
（1）核心代码：
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
var cities = new Array(11);
cities[0] = new Array("东城区","西城区" ,"崇文区", "宣武区" ,"朝阳区" ,"丰台区","石景山区" ,"海淀区门" ,"头沟区");
cities[1] = new Array();
cities[2] = new Array();
cities[3] = new Array();
cities[4] = new Array();
cities[5] = new Array();
cities[6] = new Array();
cities[7] = new Array();
cities[8] = new Array();
cities[9] = new Array();
cities[10] = new Array();
cities[11] = new Array();
$("#province").change(function(){
$("#city").empty();
var val = this.value;
$.each(cities,function(i,n){
if(val==i){//i为下标，n为当前的省份
$.each(cities[i], function(j,m) {
var textNode = document.createTextNode(m);
var opEle = document.createElement("option");
$(opEle).append(textNode);//对象的转换
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
此函数用到了用JQ的函数对二维数组进行遍历（each）、DOM操作、DOM对象向JQ对象的转化、清除（empty）。
（2）完整代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ var cities = new Array(11); cities[0] = new Array("东城区","西城区" ,"崇文区", "宣武区" ,"朝阳区" ,"丰台区","石景山区" ,"海淀区门" ,"头沟区"); cities[1] = new Array(); cities[2] = new Array(); cities[3] = new Array(); cities[4] = new Array(); cities[5] = new Array(); cities[6] = new Array(); cities[7] = new Array(); cities[8] = new Array(); cities[9] = new Array(); cities[10] = new Array(); cities[11] = new Array(); $("#province").change(function(){ $("#city").empty(); var val = this.value; $.each(cities,function(i,n){ if(val==i){//i为下标，n为当前的省份 $.each(cities[i], function(j,m) { var textNode = document.createTextNode(m); var opEle = document.createElement("option"); $(opEle).append(textNode);//对象的转换 $(opEle).appendTo($("#city")); }); } }); }); }); </script> </head> <body> <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <tr> <td height="600px" "> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr> <td> 用户名 </td> <td> <input type="text" name="user" size="34px" id="user" onfocus="showTips(\'user\',\'用户名必填！\')" onblur="check(\'user\',\'用户名不能为空！\')"/> <span id="userspan"></span> </td> </tr> <tr> <td> 密码 </td> <td> <input type="password" name="password" size="34px" id="password" onfocus="showTips(\'password\',\'密码必填\')" onblur="check(\'password\',\'密码不能为空!\')"/> <span id="passwordspan"></span> </td> </tr> <tr> <td> 确认密码 jq 遍历 each方法jQuery$.each循环遍历详解，各种取值对比，$.each遍历数组对象Dom元素二维数组双层循坏类json数据等等