使用JQuery动态创建元素并插入到合适的位置
来源:互联网 发布:linux给用户设置密码 编辑:程序博客网 时间:2024/06/08 10:42
在编写页面列表时,有个动态添加元素的需求,需要按照元素的某个属性排序,如果当前元素存在,则直接修改用于标示个数的属性,否则需要按照元素的一个属性查找到合适的位置,新建元素并插入。
具体代码如下:
- function updateHTMLInfor(jsonObj,divId,allDivId){
- if(jsonObj.dataId!=null&&jsonObj.dataId>0){
- var divDataId=divId+jsonObj.dataId;
- var dataDiv=$("#"+divDataId);
- if(dataDiv!=null)
- {
- var dataNum=dataDiv.attr('num');
- if(dataNum!=null&&dataNum>0)
- {
- if(jsonObj.dataNum!=null&&jsonObj.dataNum>0){
- if(jsonObj.dataName!=''&&jsonObj.dataName!=null){
- dataNum=parseInt(dataNum)+parseInt(jsonObj.dataNum);
- dataDiv.attr('num',dataNum);
- var dataDivText=jsonObj.dataName+" "+dataNum;
- dataDiv.text(dataDivText);
- }
- }
- }else{
- appendHTMLDiv(jsonObj,allDivId)
- }
- }
- else{
- appendHTMLDiv(jsonObj,allDivId)
- }
- }
- }
- function appendHTMLDiv(jsonObj,allDivId)
- {
- var allDataDiv=$("#"+allDivId);
- var divHtml="<div class='css_class' price='"+jsonObj.dataPrice+"'>";
- divHtml+="<div class='css_class1'><img src='"+jsonObj.dataUrl+"'"+ "alt='"+jsonObj.dataName+"' width='69' height='62'/> </div>";
- divHtml+="<div id='data_"+jsonObj.dataId+"' num='"+jsonObj.dataNum+"' price='"+jsonObj.dataPrice+"' class='css_class2'>"+ jsonObj.dataName+" "+jsonObj.dataNum +"</div>";
- divHtml+="</div>";
- var newDataDiv=$(divHtml);
- var price=jsonObj.dataPrice;
- var dataDivArray=allDataDiv.children();
- var insertDiv=null;
- for(var i=0;i<dataDivArray.length;i++)
- {
- var dataPrice=dataDivArray[i].getAttribute("price");
- if(dataPrice<price)
- {
- insertDiv=dataDivArray[i];
- break;
- }
- }
- if(insertDiv!=null)
- {
- newDataDiv.insertBefore(insertDiv);
- }
- else
- {
- allDataDiv.append(divHtml);
- }
- }
0 0
- 使用JQuery动态创建元素并插入到合适的位置
- 使用jQuery创建节点、将节点插入到指定的位置
- 使用jQuery创建节点、将节点插入到指定的位置
- 用jQuery绑定事件到动态创建的元素上
- javascript -- 动态创建HTML元素并插入到dom tree中
- 一个数组 输入一个数 查找到它的位置 插入合适的位置
- js和jQuery创建元素和把元素插入到文档中所用的方法
- 在排序好的数组插入一个数字,数字要插入到合适的位置上
- jQuery动态创建html元素的常用方法使用心得
- jQuery参考实例 1.10 创建、编辑并插入DOM元素
- js 动态创建并插入元素 insertBefore insertAfter
- jquery 动态创建元素
- jQuery动态创建元素
- jquery 动态创建元素
- jquery 动态创建元素
- Java数组-二分查找法用于元素插入有序数组,并获取元素插入的位置
- jQuery获取动态创建元素的内容
- Jquery动态插入li元素
- Java 创建二叉树并遍历
- WebStorm 配置SVN、启动浏览器、跨域
- 美团一面
- Java序列化中transient修饰符的作用
- Laravel 视图
- 使用JQuery动态创建元素并插入到合适的位置
- TensorFlow-6-TensorBoard 可视化学习
- 2.消息队列
- 大数据教程(二) Hadoop集群坏境CentOS安装
- 大数据和数据挖掘有什么关系
- Ionic 打开设置界面插件
- mysql优化——临时表的创建条件
- 取整
- UDF No TypeTag available for String