元素的新建与插入、新建元素的for循环点击事件等小整理
2017-11-30 本文已影响0人
Ruby_min
前言：最近几天在忙着找房子、忙着搬家，忙着加班，没能抽出时间整理最近遇到的一些问题。今天是11月的最后一天，2017年就剩整整一个月了，做个小整理。
相信我们大家对元素的新建与插入等都不陌生，对于列表元素的循环判断点击事件也已经掌握的很好。但是有句话说的好，万事由简入繁，又由繁入简。往往是那些看似简单的做起来却很难，而那些看似麻烦透顶、难以解决的事情，在进行有效的梳理后，发现不过是最为简单的一个问题。为什么要这么说呢？因为最近我在元素的新建与插入以及循环点击判断方法上因为一些疏忽耽误了不少时间。源于此，记录下来，以免后续再犯。
1)首先做一个简单的创建和插入：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素的新建与插入</title>
</head>
<body>
<div id="wrapper">
<ul id="somethinglist"></ul>
</div>
</body>
</html>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script>
//新建元素
var li = document.createElement("li");
$("#somethinglist").append(li);
//创建数组
var span_arr = [];
for(var i = 0;i<3;i++){
span_arr[i] = document.createElement("span");
li.appendChild(span_arr[i]);
}
</script>
图一：结果示例
2）接下来进行对新建元素的赋值以及双重循环操作：body部分代码不变，只操作js部分。
<script>
//可以当做是从后端服务器返回的成功回调中的数据
var respose_array = [
{
"name": "WLM",
"gender": "female",
"birthday": "xxxx-10-19"
},
{
"name": "WLM",
"gender": "female",
"birthday": "xxxx-10-19"
},
{
"name": "WLM",
"gender": "female",
"birthday": "xxxx-10-19"
}
];
for(var j = 0;j<respose_array.length;j++){
//新建元素
var li = document.createElement("li");
$("#somethinglist").append(li);
//创建数组
var span_arr = [];
for(var i = 0;i<3;i++){
span_arr[i] = document.createElement("span");
li.appendChild(span_arr[i]);
}
}
</script>
图二-结果示例
接着是对新创建的元素进行赋值操作。在for循环中增加赋值操作：
for(var j = 0;j<respose_array.length;j++){
//新建元素
var li = document.createElement("li");
$("#somethinglist").append(li);
//创建数组
var span_arr = [];
for(var i = 0;i<3;i++){
span_arr[i] = document.createElement("span");
li.appendChild(span_arr[i]);
}
//对span进行赋值
span_arr[0].innerHTML = respose_array[j].name;
span_arr[1].innerHTML = respose_array[j].gender;
span_arr[2].innerHTML = respose_array[j].birthday;
}
通过观察页面效果，发现成功插入并赋值。由此可知插入元素与对新建的元素赋值这两个操作并无顺序问题。在先进行插入操作后再赋值也无妨。
下面说一下对新创建的元素绑定事件的操作。在上述for循环完成后接下来下面的操作：
//对li的循环点击事件
//注:要想对新建元素绑定事件或者列表操作，需要在创建完所有的元素之后进行才可以。即在上述外层循环结束之后再做单独处理。
//间接
var somethinglist = document.querySelector("#somethinglist");
var lis = somethinglist.querySelectorAll("li");
//也或者是在新建li元素的时候，给其设置类，以便在此位置直接获取。
//var lis = document.querySelectorAll(".list_li");
for(var z = 0;z<lis.length;z++){
//闭包
(function(index){
lis[index].onclick = function(){
alert(index);
}
})(z);
}
以上涉及到新创建元素的获取、列表项的循环点击事件、闭包的使用等。之后再从后端数据库获取数据时，可以参照上面的逻辑和方法进行相关元素的创建、赋值、插入以及绑定事件。
