`

jQuery追加新的元素,便于排序

阅读更多
var element = document.createElement(tagName);

// create a new div element
  // and give it some content
  newDiv = document.createElement("div");
  newContent = document.createTextNode("Hi there and greetings!");
  newDiv.appendChild(newContent); //add the text node to the newly created div.

  // add the newly created element and it's content into the DOM
  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);


<ul id="ul_collect" style="position: absolute;left: -75px;width: 940px;">
		<li transId="_TRANS_ID.NUONUO" transName="" url="" class="infoBtn swapImage fucai" style="background-image: url('/images/collect/zyt_btn.png');">
			诺诺</li>
		<li transId="_TRANS_ID.YOUBANG" transName="" url="" class="infoBtn swapImage fucai" style="background-image: url('/images/collect/zyt_btn.png');">
			友邦</li>
		<li transId="_TRANS_ID.GUANGFA" transName="" url="" class="infoBtn swapImage fucai" style="background-image: url('/images/collect/wlbtysh_btn.png');">
			广发银行</li>
		<li transId="_TRANS_ID.PINGAN" transName="" url="" class="infoBtn swapImage fucai" style="background-image: url('/images/collect/wlbtysh_btn.png');">
			平安银行</li>
	</ul>


_STAGE.currentBiz = "pingan|nuonuo";


var currentBizArr = _STAGE.currentBiz.split("|");
		jQuery("#ul_collect").empty();
		for(var i = 0; i < currentBizArr.length; i++){
			jQuery("#ul_collect").append(document.createElement("li")).find("li").eq(i).attr("transId",
			"_TRANS_ID."+(currentBizArr[i].toUpperCase())).addClass("infoBtn swapImage fucai").attr("style", 
			"background-image: url('/images/collect/wlbtysh_btn.png');").text(currentBizArr[i].toUpperCase());
		}
		
		jQuery("li").css({
			"width" : "419",
			"height" : "91",
			"border" : "0",
			"vertical-align" : "middle",
			"font-size" : "22px",
			"color" : "white",
			"line-height" : "3.5"
		}).addClass("text_center");


、、追加词典对应值:
// 信息收集业务文字
	currentBizText : {
		"guangfa" : "广发银行",
		"pingan" : "平安银行",
		"nuonuo" : "诺诺",
		"youbang" : "友邦"
	},

for(var i = 0; i < currentBizArr.length; i++){
			jQuery("#ul_collect").append(document.createElement("li")).find("li").eq(i).attr("transId",
			"_TRANS_ID."+(currentBizArr[i].toUpperCase())).addClass("infoBtn swapImage fucai").attr("style", 
			"background-image: url('/images/collect/wlbtysh_btn.png');").text(this.currentBizText[currentBizArr[i]]);
		}


this.currentBizText[currentBizArr[i]]
分享到:
评论

相关推荐

    JQuery对元素拖拽排序,元素拖拽,JQuery拖拽Demo

    用JQuery写的拖动元素进行排序的方法,包含拖动排序、拖动移除、拖动添加。 代码完整可用。没有用到第三方插件,自主可控。 原理是用CSS中position定位来跟踪鼠标移动,就是让元素跟踪鼠标位置,然后判断其在页面...

    拖动排序元素jquery插件

    本文将深入探讨“拖动排序元素”的jQuery插件,这是一款用于实现用户通过拖放操作来重新排序页面元素的强大工具。 标题中的“拖动排序元素jQuery插件”是指一个基于jQuery的插件,它的主要功能是允许用户通过直接...

    jQuery实现DIV元素拖动排序代码.rar

    4. **事件监听**:你可以监听`stop`或`update`事件,当元素排序完成后触发相关操作,例如保存新的顺序到服务器。 ```javascript $("#sortable").on('sortstop', function(event, ui) { var sortedItems = $(this)....

    jquery实现列表左右上下排序

    4. **更新DOM**:一旦排序完成,使用jQuery的`appendTo()`、`insertBefore()`或`insertAfter()`等方法,将元素按照新的顺序插入到DOM中。这样,用户就能在界面上看到排序的结果。 以下是一个简单的示例代码片段,...

    jquery纵向排序 网格排序 拖动排序 插件

    通过学习和应用这个jQuery插件,开发者不仅可以掌握拖放排序的核心技术,还能进一步提升自己的JavaScript和jQuery技能,为项目增添更多互动元素,提升用户体验。同时,理解并掌握这些原理,有助于开发者在未来的项目...

    jquery 实现上下移动元素排序无刷新

    在网页开发中,jQuery是一个...这个例子展示了如何通过jQuery实现简单的元素排序,并提供了进一步扩展到Ajax交互的基础。实际应用中,你可能需要根据具体需求调整代码,例如处理多列数据、错误处理和更复杂的UI反馈。

    jQuery排序

    当涉及到数据或元素的排序时,jQuery提供了一种简单的方法,这就是jQuery排序功能。在本篇中,我们将深入探讨jQuery如何实现排序,以及`jquery.sort.js`这个插件在其中的作用。 首先,jQuery本身并不直接包含一个...

    jQuery鼠标上下拖动div排序代码

    《jQuery实现鼠标拖动div排序技术详解》 在网页开发中,用户交互体验是至关重要的。其中,元素的可拖动排序功能可以让用户更加直观地调整界面布局,提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...

    jquery - 1.4.2 图片拖拽排序实例

    【jQuery - 1.4.2 图片拖拽排序实例详解】 在Web开发中,实现用户界面的交互性是提高用户体验的重要手段。jQuery库因其简洁的API和强大的功能,成为了JavaScript开发者常用的选择。本实例主要关注的是使用jQuery ...

    jQuery拖拽插件制作拖拽排序特效.zip

    jQuery拖拽插件是这个库的一个扩展,它允许用户通过鼠标拖动元素来实现各种交互效果,例如在列表或网格中的拖拽排序。本教程将深入讲解如何利用jQuery制作拖拽排序特效,这将极大地提升用户体验,尤其是在数据管理或...

    jQuery带删除的拖动排序

    - 当用户释放鼠标(`mouseup`事件)时,停止移动并确认新的排序位置。 示例代码如下: ```javascript $(document).on('mousedown', '.draggable', function(e) { let $this = $(this); let offset = $this....

    jquery实现table内数据排序,点击即可

    总的来说,通过`jQuery`实现的表格排序功能,不仅提高了用户体验,还降低了服务器端的压力。然而,对于大型数据集,可能需要考虑到性能优化,例如使用虚拟滚动、延迟加载等技术,以防止一次性加载大量数据导致的页面...

    jQuery拖拽插件制作拖拽排序特效

    在本文中,我们将深入探讨如何使用jQuery来创建一个拖拽排序特效插件。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得实现拖放功能变得更为容易。拖放功能允许用户通过鼠标操作直接...

    Jquery Sortable实现div拖动排序效果

    在网页开发中,jQuery Sortable 是一个非常实用的插件,它允许用户通过拖放操作对HTML元素(如div)进行排序。这个功能对于构建交互性强、用户体验良好的列表或网格布局至关重要。本篇文章将深入探讨如何使用 jQuery...

    jQuery仿Excel表格列表排序代码

    **jQuery仿Excel表格列表排序代码**是一种在网页中实现类似Excel表格功能的技术,它允许用户对数据进行排序、检索和筛选,提供了丰富的交互体验。在Web开发中,jQuery库因其简洁的API和强大的功能而被广泛应用,对于...

    jquery div拖动排序效果代码.zip

    本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...

    jquery实现表格排序

    ### jQuery 实现表格排序 #### 知识点一:jQuery表格排序插件介绍 在Web开发中,数据展示经常需要通过表格的形式呈现给用户,并且为了方便用户查找所需信息,通常会提供排序功能。传统的表格排序往往需要后端的...

    Jquery表格排序插件,支持快速排序

    选择排序是一种简单的排序算法,其基本思想是在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。以此类推,直到所有元素...

    jquery筛选并控制图片排序插件

    本文将详细探讨"jquery筛选并控制图片排序插件"这一主题,帮助开发者了解如何利用jQuery实现图片的筛选和排序功能,以增强网页的交互性和用户体验。 首先,jQuery提供了一套丰富的选择器,用于高效地选取DOM元素。...

    jQuery批量图片拖动排序和查看

    这通常涉及到对DOM元素的实时更新,确保排序后的新顺序能够正确反映在数据库或服务器端。 接着,我们关注到"支持多选"这一特性。在jQuery中,可以通过`class`或`data-*`属性来选择多个元素。用户可以选择多张图片...

Global site tag (gtag.js) - Google Analytics