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 tip提示插件(实例分享)
Apr 28 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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
文件上传的实现
2006/10/09 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Pytorch中.new()的作用详解
2020/02/18 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
python要安装在哪个盘
2020/06/15 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
优秀员工自荐信范文
2013/10/05 职场文书
我的求职计划书
2014/01/10 职场文书
公益活动邀请函
2014/02/05 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
委托收款证明
2015/06/23 职场文书
搞笑婚庆主持词
2015/06/29 职场文书