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. Web前端JQuery面试题(一)

    Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...

  2. ajax&bootstrap

    1.ajax 后台 # 通过flask框架搭建后台 from flask import flask,request # 创建一个服务器对象 app = Flask(__name__) # 解决ajax ...

  3. Jquery+Eayui实现列表选择功能

    在做一个列表选择的功能,要实现一个Jquery列表选择器的效果,如图就是很常见的一种列表选择器 不过网上开源的可能要积分,资料没找到合适的,所以自己就简单写了一下,其实实现也不是很难.实现思路:左边双 ...

  4. 五分钟了解node,cnpm和yarn

    1.静态网页和动态网页 动态网页:数据可以进行交互,动态改变数据 2.node node是基于chrome的V8引擎的javascript的运行环境,node中的事件机制以及非阻塞式的I/O式模式,使 ...

  5. (转)Python__slots__详解

    原文:https://www.cnblogs.com/rainfd/p/slots.html#top 摘要 当一个类需要创建大量实例时,可以通过__slots__声明实例所需要的属性, 例如,clas ...

  6. IntelliJ IDEA中用Git插件操作

  7. Python快速学习06:词典

    系列文章:[传送门] 上面讲的,特别是对象和类,大家好好体会. Python对象是Python语言的核心部分.今天介绍一个新类:词典(dictionary) 基本概念 字典是Python 中的映射数据 ...

  8. 基于Github&Hexo的个人博客搭建过程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. linux 命令 — grep

    grep 用于文本搜索,能接受文件或者stdin作为输入,能输出各种格式 grep match_pattern filename 搜索文件中出现match_pattern的行,match_patter ...

  10. DHCP服务器的搭建

    dhcp笔记整理:http://services.linuxpanda.tech/DHCP/index.html 1 dhcp简介 DHCP原理 动态主机配置协议(Dynamic Host Confi ...