`
bsr1983
  • 浏览: 1129093 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用JQuery动态创建元素并插入到合适的位置

 
阅读更多

在编写页面列表时,有个动态添加元素的需求,需要按照元素的某个属性排序,如果当前元素存在,则直接修改用于标示个数的属性,否则需要按照元素的一个属性查找到合适的位置,新建元素并插入。

具体代码如下:

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拖动div元素标签

    或者在使用jQuery动态创建div时设置大小: ```javascript var newDiv = $("; height: 150px;'&gt;&lt;/div&gt;"); ``` 此外,还可以使用CSS类来控制div的大小,这样更容易维护和统一样式。 综上所述,结合jQuery UI的...

    JQuery实现插入行

    - 如果表格数据量大,考虑到性能优化,可能需要使用`$.each()`遍历数组并批量插入行。 总的来说,jQuery提供了一种简洁且强大的方式来操作DOM,实现诸如插入行这样的功能。通过理解jQuery的基本语法和方法,你可以...

    jQuery表单元素动态增加删除代码.zip

    2. 插入新元素:使用`$().append()`或`$().prepend()`将新元素添加到适当的位置,比如表格行或者某个容器内。 3. 绑定事件:新创建的元素同样需要响应用户的操作,如删除,所以需要为它们绑定相应的事件处理器。 4. ...

    jQuery动态创建元素以及追加节点的实现方法

    本文将详细介绍如何使用jQuery来动态创建元素以及如何追加节点。 首先,jQuery允许开发者通过字符串形式创建HTML元素。例如,我们可以创建一个`&lt;a&gt;`标签并设置其`href`属性: ```javascript var str = $("我们&lt;/a&gt;...

    jquery 动态添加控件

    本篇文章将深入探讨如何使用jQuery动态添加控件,包括元素的创建、插入和绑定事件,以及在实际项目中的应用。 首先,我们来了解jQuery如何创建新的HTML元素。在JavaScript中,创建元素通常是通过`document....

    jQuery文本框创建关键词标签代码

    这个过程涉及到文本框的值获取、新标签的DOM元素创建,以及将其插入到合适的位置。 2. **初始化已设标签**: 当页面加载时,可能已经存在预定义的标签。使用jQuery,我们可以预先填充这些标签到界面上,确保用户...

    javascript与jquery动态创建html元素示例

    3. **安全性**:动态创建元素并插入到页面中可能会引起安全问题,特别是涉及到用户输入时,需要对用户输入进行适当的过滤和转义,避免XSS攻击等安全风险。 4. **代码组织**:将动态创建元素的代码进行模块化或封装...

    jQuery实现在最后一个元素之前插入新元素的方法

    通过这个方法,开发者可以非常方便地在页面的特定位置插入新内容,而不必关心具体的DOM操作细节,如创建元素节点、操作DOM树结构等,这些都由jQuery库在底层处理完毕。 jQuery的这种方法大大降低了Web开发的难度和...

    jquery 排序, jquery 动态修改列

    以上代码将从API获取数据,清空表格内容,然后根据返回的数据创建新的行并添加到表格中。 总之,jQuery为开发者提供了强大的工具来处理页面上的数据排序和动态更新。通过熟练掌握这些功能,你可以构建更加动态、...

    jQuery动态添加删除分组插件

    这个过程包括创建新的HTML元素(如div、input等),并将其插入到页面的适当位置。同时,新分组可能需要包含编辑和删除功能的按钮。 2. **动态删除**:当用户选择删除某个分组时,插件会监听删除按钮的点击事件,...

    jQuery动态添加节点循环流程图表代码.zip

    jQuery提供了更加简洁的API,如`$('&lt;元素&gt;')`用于创建新节点,`.append()`、`.prepend()`等方法用于将节点插入到指定位置。通过这些方法,我们可以动态地向页面添加内容,使页面更具交互性。 在循环流程图表的实现...

    jQuery使用手册.docjQuery使用手册.docjQuery使用手册.doc

    - 创建与插入元素:`$('&lt;div&gt;&lt;/div&gt;').appendTo('body')`可以在body末尾添加新的div元素。 - 删除元素:`$('p').remove()`会移除所有段落元素。 - 查找与筛选元素:`$('div').children('span')`将查找所有div内的...

    jquery动态分页数据获取代码

    3. **数据处理**:服务器返回数据后,jQuery 会触发回调函数,此时可以将新数据插入到页面的适当位置,替换或添加现有内容。 4. **更新分页导航**:根据返回的总页数,更新分页导航的状态,例如禁用无法点击的“上...

    jquery textarea插入gif动态QQ表情图片表单提交

    本主题聚焦于在textarea元素中插入并提交gif动态QQ表情图片,这是社交网络和论坛常见的一种功能,用于增强用户互动性。下面将详细讨论如何实现这个功能。 首先,我们需要了解textarea的基本用法。textarea是HTML中...

    jQuery复制表单元素代码.zip

    本资源“jQuery复制表单元素代码.zip”聚焦于如何使用jQuery实现表单元素的复制功能,这对于动态创建表单、批量添加输入项或构建可配置界面非常有用。下面将详细介绍jQuery在处理表单元素复制时的关键知识点。 首先...

    jQuery实现图片动态加载效果

    可以使用jQuery的`height()`和`outerHeight()`方法来计算元素的高度,然后根据屏幕宽度动态调整列数。 7. **优化**:为了提升性能,可以使用`$.ajaxSetup({ cache: true })`启用缓存,避免重复请求同一图片。同时,...

    使用jquery做的动态扩展的tree

    `Jquery实现无限极树状结构并动态添加增删改等编辑功能——56gee_files`很可能包含了实现树形结构所需的CSS样式和JavaScript脚本,这些脚本可能包括了数据的加载、树节点的创建、编辑功能的实现等逻辑。 `demoImgs`...

    jQuery评论框插入表情图片代码

    在这个场景中,我们讨论的是使用jQuery实现一个评论框功能,允许用户在发表评论时插入表情图片,增加互动性和趣味性。这个功能通常应用于社交媒体、论坛或者博客等交互性强的网站。 首先,我们需要理解`index.html`...

    jquery 确定光标位置

    当涉及到“jquery 确定光标位置”这个主题时,我们主要关注的是如何在HTML输入元素中获取或设置用户光标的当前位置。这在创建富文本编辑器、表单验证或任何需要动态控制输入焦点的应用程序中是非常有用的。 首先,...

Global site tag (gtag.js) - Google Analytics