1、html标记

 <ul id="attachText">
<li data-text="111"><a href="#">查看附件</a>&nbsp;&nbsp;<a href="#">删除</a></li>
<li data-text="222"><a href="#">查看附件</a>&nbsp;&nbsp;<a href="#">删除</a></li>
<li data-text="333"><a href="#">查看附件</a>&nbsp;&nbsp;<a href="#">删除</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>&nbsp;&nbsp;<a>删除</a></li>");
});
}

Jquery操作ul的一些操作笔记的更多相关文章

  1. jquery 温故而知新 Ul 相关的操作

    在UL中取得第一级的LI   <div id='demo1'> <ul> <li id='1'>1<li> <li id='2'>2< ...

  2. HTML 学习笔记 JQuery(表单,表格 操作)

    表单应用 一个表单有3个基本组成部分 (1)表单标签:包含处理表单数据所用的服务器端程序URL 以及数据提交到服务器的方法 (2)表单域:包含文本框 密码框 隐藏框 多行文本框 复选框 单选框 下拉选 ...

  3. jQuery 对表单、表格的操作及更多应用-简略笔记

    [jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...

  4. 【学习笔记】锋利的jQuery(二)DOM操作

    一.获取DOM节点 //找祖宗 parent() parents() closest() //找后代 children(); find(); //找兄弟 next()/nextAll() prev() ...

  5. jquery中的节点的操作

    节点的操作 Dom 文档对象 模型 解决 一.插入节点 Append() 在每个匹配的元素中追加内容 Var  $li_1= “<li></li>”; Var  $li_2 = ...

  6. jQuery(3)——DOM操作

    ---恢复内容开始---   jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...

  7. jQuery的属性,事件及操作

    1.属性操作 1.1 基本属性操作 $("img").attr("src") 返回文档中所有图像的src属性值 $("img").attr( ...

  8. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  9. JQuery第三天——CSS操作与JQuery事件

    JQuery的CSS_DOM与样式操作 样式: 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成 ...

随机推荐

  1. Nginx 教程(3):SSL 设置

    SSL 和 TLS SSL(Socket Secure Layer 缩写)是一种通过 HTTP 提供安全连接的协议. SSL 1.0 由 Netscape 开发,但由于严重的安全漏洞从未公开发布过.S ...

  2. Windows 10 无法使用搜索栏,显示一片空白

    查看这个:https://blog.csdn.net/qq_41571056/article/details/82928919

  3. 10-Mock模拟接口返回数据

    1.安装mock 方法一:pip安装 命令行直接输入:pip install mock 方法二:官网下载mock安装包安装 下载安装包后,解压,命令行进入解压目录,执行python setup.py ...

  4. ORACLE知识点总结

    一.ORACEL常用命令 1.解锁账户:ALTER USER username ACCOUNT UNLOCK; 2.查看数据库字符集:SELECT USERENV ('language') FROM ...

  5. Linux的50个基本命令

    1.ls -a 列出当前目录下的所有文件,包括以.头的隐含文件(如-/.bashrc) ls –l 列出当前目录下文件的详细信息 2. pwd 查看当前所在目录的绝对路经 3. cd 目录之间的移动 ...

  6. electron-builder 由于网络原因无法下载问题解决

    electron-builder 由于网络原因无法下载问题解决 在package.json的build中添加electron的镜像 "electronDownload": { &q ...

  7. Day8:html和css

    Day8:html和css 显示和隐藏: display: none 为 无,隐藏元素 display: block 为 显示元素 转换为块级元素 visibility: visible 显示 vis ...

  8. 为什么 array.foreach 不支持 async/await

    一.背景 react 项目中,渲染组件时,显示的数据一直有问题,本来以为是 react 组件的问题,后来才发现罪魁祸首在 fetch 数据的过程,因为我用了 async/await ,而却搭配了 fo ...

  9. vmware中nat模式中使用静态ip后无法上网的问题

    在/etc/network/interfaces中添加静态ip auto eth0iface eth0 inet staticaddress 192.168.31.133netmask 255.255 ...

  10. java开发个人简历

    求职意向 Java开发工程师 陈 楠 性 别:男 出生年月 :1995.07 民 族:汉族 联系方式 :159-3306-7520 学 历:本科 电子邮件 :15933067520@163.com 教 ...