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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery实现吸顶导航效果
Jan 08 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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
python迭代器实例简析
2014/09/25 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python Xpath语法的使用
2020/11/26 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
小学英语教学反思
2014/01/30 职场文书
机关出纳岗位职责
2014/04/03 职场文书
广播体操口号
2014/06/18 职场文书
领导欢迎词致辞
2015/01/23 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
主持稿开场白
2015/06/01 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python