jquery操作ul的一些操作笔记整理(干货)


Posted in jQuery onAugust 31, 2017

1、html标记

<ul id="attachText">
     <li data-text="111"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看附件</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></li>
     <li data-text="222"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看附件</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></li>
     <li data-text="333"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看附件</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></li>
 </ul>

JS

1、获取 li属性 data-text的值用 ,隔开

function GetValues()
  {
   var values = "";
   var obj = $("#attachText li");   
   if(obj.length>0)
   {
    var len = $(obj).length-1;
    $.each(obj, function (index, value)
    {
     //表示为最后一个元素
     if (index == len) {
      values += $(value).attr("data-text");
     }
     else {
      values += $(value).attr("data-text") + ",";
     }
    })
   }
   console.log(values);
  }

输出结果;111,222,333

2、编辑的时候初始化ul的li项

function LoadAttach()
  {
   $("#attachText").html("");//先清空
   
   var data="111,222,333";
   var arr = data.split(',');
   $.each(arr, function (index, value) {  
     $("#attachText").prepend("<li data-value=\"" + $.parseJSON(data).data + "\"><a>查看附件</a>  <a>删除</a></li>");     
   });
  }

以上这篇jquery操作ul的一些操作笔记整理(干货)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 #jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 #jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 #jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 #jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 #jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 #jQuery
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
python自动化测试实例解析
2014/09/28 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
python操作yaml说明
2020/04/08 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
公益活动邀请函
2014/02/05 职场文书
教师党员公开承诺书
2014/03/25 职场文书
护士节策划方案
2014/05/19 职场文书
装修施工安全责任书
2014/07/24 职场文书
驻村工作先进事迹
2014/08/14 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
资金申请报告范文
2015/05/14 职场文书
标枪加油稿
2015/07/22 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang