Jquery操作ul的一些操作笔记

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>");
            });
        }
时间: 2025-01-09 12:03:15

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

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

一.获取DOM节点 //找祖宗 parent() parents() closest() //找后代 children(); find(); //找兄弟 next()/nextAll() prev()/prevAll() siblings() 二.元素节点操作 $(html) //创建DOM append()/appendTo() //内部追加 prepend()/prependTo() //内部前置 after()/insertAfter() //后面插入 before()/insertBef

jquery中的节点的操作

节点的操作 Dom 文档对象 模型 解决 一.插入节点 Append() 在每个匹配的元素中追加内容 Var  $li_1= “<li></li>”; Var  $li_2 =”<li></li>” $(“ul”).append($li_1).append($li_2); //添加到ul中rep appendTo() 将所有匹配元素追加到指定元素中 $(“<b>asd</b>”).appendTo(p);  p 指<p>&

jquery api 常见api 元素操作例子

append_prepend.html 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=

linux内存操作--ioremap和mmap学习笔记

最近在做视频输出相关的东西,对于预留给framebuffer的内存使用不是很清楚,现在找到一些资料整理一下,以备使用. 对于一个系统来讲,会有很多的外设,那么这些外设的管理都是通过CPU完成.那么CPU在这个过程中是如何找到外设的呢? 尽管在一个系统中会有诸多的外设,在每个外设的接口电路中会有多个端口.但是如果系统能够每个端口都被赋予一个具体的地址值,那么在系统中就能轻易的找到任何一个外设.系统在管理的时候,不管是内存还是外设都需要分配一个内存地址.对于一个32bit的系统来讲,可寻址的范围为2

JQuery 对 Select option 的操作---转载

<select id="selectID" > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option

JQuery 对 Select option 的操作

心静禅定ing It is my decision,It is my life. JQuery 对 Select option 的操作 下拉框: <select id="selectID" >        <option value="1">1</option>        <option value="2">2</option>        <option value=&q

jquery下json数组的操作用法实例

jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像JSON数据是以数组的形式出现的,下面是一些实例,仅供参考. 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限

jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次

jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 Js代码  下载 /** * 全选 * 对于Jquey1.7.2+版本,使用attr会造成只能操作一次. * 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. * 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. * @param checkName */ function checkAll(chec

jquery api 常见api 效果操作例子

addClass_removeClass_toggleClass_hasClass.html 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" conten