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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery实现本地存储
Dec 22 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 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
javascript getElementsByTagName
2011/01/31 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
使用Vue生成动态表单
2019/11/26 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python科学计算之Pandas详解
2017/01/15 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Django设置Postgresql的操作
2020/05/14 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
社区矫正工作方案
2014/06/04 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
初中语文教学反思范文
2016/03/03 职场文书