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获取radio选中的值
May 05 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
详解jQuery-each()方法
Mar 13 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery实现简单飞机大战
Jul 05 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
使用正则替换变量
2007/05/05 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
js实现移动端轮播图
2020/12/21 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
python让列表倒序输出的实例
2018/06/25 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python梯度下降算法的实现
2020/02/24 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
最新创业融资计划书
2014/01/19 职场文书
普通员工辞职信范文
2015/05/12 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书