js怎么把几个li标签按顺序添加进一个div中?
2017-12-10 20:13
381 查看
1.js怎么把几个li标签按顺序添加进一个div中?
这种问题一般出现在前端请求数据之后,后端以数组的形式返回给前端,然后前端对这些数组进行处理。
(1)首先是对后端返回的数据进行拆分,分别得到你想要得到的数据,就比如后台返回数据的id,name,type,status等;
即可令:
var datas = response.data;
var length = datas.length;
(2)然后开始遍历后端返回的数组里数据;
for(i=0;i<length;i++){
var data = datas[i];
var id = data.id;
var name = data.name;
var type = data.type;
var status = data.status;
}
如果返回的status还分了类,那么你就要对其各种分类进行不同的判断,比如:
if(status == "0"){
//codes go here
}else if(status == "1"){
//codes go here
}else{
//codes go here
}
具体情况按照项目的需求来即可;
(3)再然后给每个li标签赋一个id,使其唯一,id值的大小是变化的,可以先令第一个li标签的id=1,后面递增;
var list_str = '<li id=""' + id + 'class="list_li">' + li_content + '</li>';
(4)最后直接把定义得到的li添加到指定的ul中就ok了;
$("ul").append(list_str);
(5)这样就把后台返回的数据添加到指定的div中或者ul中了。
(6)但是有时候我们需要把所有后端返回的数据全部用上,意思是后端返回的第一个数组里的数据要全部用于id=1的li标签里,不能用于其他的li标签中。那么可以在定义的li标签中可以添加所有数据在li里,可以这样写:
var list_str = '<li id=""' + id + 'class="list_li">' + li_content + '<span class="list_span1">' + name + '</span>' + '<span class="list_span2">' + type + '</span>' + '<span class="list_span3">' + status + '</span>' + '</li>';
这样就把每一个数组里的数据都写在了对应的li标签里了,到时候可直接调用,最方便的是,里面的id,name,type,status都是动态的,也就是变化的,根本无需另外处理,可以直接调用,但是这里值得注意的是,因为页面最后呈现的只有li标签里的content的内容,不包含其他的内容,即name,type,status。那么怎么对另外三个数据进行处理呢?
(7)很简单,这样不是在li标签中设置了class名吗?只需要在css文件里将对应的class名里面写下display: none;就欧克了!也就是隐藏它们就好了,但是对值得调用并不影响;
(8)主要的技术点已经介绍完毕,至于其他的相关处理,只需要在对应的位置写下处理代码就可以了。
这种问题一般出现在前端请求数据之后,后端以数组的形式返回给前端,然后前端对这些数组进行处理。
(1)首先是对后端返回的数据进行拆分,分别得到你想要得到的数据,就比如后台返回数据的id,name,type,status等;
即可令:
var datas = response.data;
var length = datas.length;
(2)然后开始遍历后端返回的数组里数据;
for(i=0;i<length;i++){
var data = datas[i];
var id = data.id;
var name = data.name;
var type = data.type;
var status = data.status;
}
如果返回的status还分了类,那么你就要对其各种分类进行不同的判断,比如:
if(status == "0"){
//codes go here
}else if(status == "1"){
//codes go here
}else{
//codes go here
}
具体情况按照项目的需求来即可;
(3)再然后给每个li标签赋一个id,使其唯一,id值的大小是变化的,可以先令第一个li标签的id=1,后面递增;
var list_str = '<li id=""' + id + 'class="list_li">' + li_content + '</li>';
(4)最后直接把定义得到的li添加到指定的ul中就ok了;
$("ul").append(list_str);
(5)这样就把后台返回的数据添加到指定的div中或者ul中了。
(6)但是有时候我们需要把所有后端返回的数据全部用上,意思是后端返回的第一个数组里的数据要全部用于id=1的li标签里,不能用于其他的li标签中。那么可以在定义的li标签中可以添加所有数据在li里,可以这样写:
var list_str = '<li id=""' + id + 'class="list_li">' + li_content + '<span class="list_span1">' + name + '</span>' + '<span class="list_span2">' + type + '</span>' + '<span class="list_span3">' + status + '</span>' + '</li>';
这样就把每一个数组里的数据都写在了对应的li标签里了,到时候可直接调用,最方便的是,里面的id,name,type,status都是动态的,也就是变化的,根本无需另外处理,可以直接调用,但是这里值得注意的是,因为页面最后呈现的只有li标签里的content的内容,不包含其他的内容,即name,type,status。那么怎么对另外三个数据进行处理呢?
(7)很简单,这样不是在li标签中设置了class名吗?只需要在css文件里将对应的class名里面写下display: none;就欧克了!也就是隐藏它们就好了,但是对值得调用并不影响;
(8)主要的技术点已经介绍完毕,至于其他的相关处理,只需要在对应的位置写下处理代码就可以了。
相关文章推荐
- js通过innerHTML向div中追加标签,添加后之前输入的内容都清空了解决方法
- .net添加前端样式和JS添加标签样式、以及div/a 标签的显示和隐藏
- 原生js怎么删除一个 div
- div怎么添加一个点击事件onClick?
- jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class
- jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?
- 同一个标签,可以添加多个事件(如多个click),那么执行顺序是怎么样的呢?
- js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
- js 动态添加元素(div、li、img等)及设置属性
- a标签的下载链接,如果是图片,点击链接是下载一个图片而不是直接打开,应该怎么办?(添加download属性)
- js 动态添加元素(div、li、img等)及设置属性的方法
- 【写一个自己的js库】 3.添加几个处理字符串的方法
- js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
- jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?
- javaweb学习第五天,用js实现“在标签末尾添加一个节点”
- html几个重要标签用法(div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em)
- 用js怎么取table中的tr标签--这是一个陷阱
- js操作标签调换顺序,添加类似收款地址样式
- js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
- 原生js怎么删除一个 div