jQuery实现li元素顺序变更代码示例

  • 内容
  • 评论
  • 相关

本文实现了li元素顺序变更代码示例

代码实例如下:

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).var json = [],这是一个数组,里面存储我们需要的数据。

(2).$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(3).var $topUl = $("#topul"),获取id属性值为topul的元素。

(4).var $bottomUl = $("#bottomul"),获取id属性值为bottomul的元素。

(5).for (var index = 0; index < json.length; index++) {},对数组进行遍历操作。

(6).$Li = $("<li>" + json[index].webName + "," + json[index].Age + "岁</li>"),创建li元素。

(7).$Li.click(function () {}),为li元素注册click事件处理函数。

(8).if ($(this).parent().attr("id") == "topul") {

$(this).appendTo($bottomUl);

},如果当前li元素的父元素的id属性值,那么就将当前li元素移动到id属性值为bottomUl的ul中。

(9).$topUl.append($Li),将创建的li元素添加到ul中。

本文案例为大家展示了《jQuery实现li元素顺序变更代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。



注意:如需评论后运行请重新刷新页面,谢谢您搞代码学习知识

原创文章,转载请注明: 转载自搞代码

本文链接地址: jQuery实现li元素顺序变更代码示例

微信支付二维码

微信 赏一包辣条吧~

支付宝支付二维码

支付宝 赏一听可乐吧~

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注