jquery操作ul的一些操作笔记整理(干货)

发布时间 - 2026-01-11 03:02:31    点击率:

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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<a>删除</a></li>");     
   });
  }

以上这篇jquery操作ul的一些操作笔记整理(干货)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


# jquery  # ul  # jQuery学习笔记之jQuery的DOM操作  # jQuery学习笔记之入门  # 给大家  # 希望能  # 这篇  # 小编  # 大家多多  # 清空  # data  # text  # li  # id  # attachText  # gt  # external  # nofollow  # amp  # href  # rel  # ff00ff  # strong  # html 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 网站制作公司哪里好做,成都网站制作公司哪家做得比较好,更正规?  如何在Windows 2008云服务器安全搭建网站?  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  详解jQuery停止动画——stop()方法的使用  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  三星、SK海力士获美批准:可向中国出口芯片制造设备  标题:Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  Python高阶函数应用_函数作为参数说明【指导】  北京网站制作的公司有哪些,北京白云观官方网站?  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  如何在建站宝盒中设置产品搜索功能?  高端云建站费用究竟需要多少预算?  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  Laravel如何处理异常和错误?(Handler示例)  Laravel如何实现一对一模型关联?(Eloquent示例)  个人网站制作流程图片大全,个人网站如何注销?  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  php json中文编码为null的解决办法  bootstrap日历插件datetimepicker使用方法  EditPlus中的正则表达式实战(6)  EditPlus中的正则表达式 实战(1)  jQuery中的100个技巧汇总  如何在橙子建站上传落地页?操作指南详解  Laravel如何创建自定义中间件?(Middleware代码示例)  Laravel如何实现模型的全局作用域?(Global Scope示例)  如何用免费手机建站系统零基础打造专业网站?  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样?  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  奇安信“盘古石”团队突破 iOS 26.1 提权  Swift开发中switch语句值绑定模式  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  历史网站制作软件,华为如何找回被删除的网站?  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  如何快速搭建高效香港服务器网站?  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧