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 29 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 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
PHP检测用户语言的方法
2015/06/15 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
Yii实现简单分页的方法
2016/04/29 PHP
让您的菜单不离网站
2006/10/03 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
Bootstrap插件全集
2016/07/18 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python实现发送邮件功能代码
2017/12/14 Python
Python3获取cookie常用三种方案
2020/10/05 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
高三体育教学反思
2014/01/29 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
鉴定评语大全
2014/05/05 职场文书
水电站项目建议书
2014/05/12 职场文书
演讲稿格式范文
2014/05/19 职场文书
工地标语大全
2014/06/18 职场文书
班子四风对照检查材料
2014/08/21 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers