快捷導(dǎo)航

jquery操作ul的一些操作筆記整理(干貨)

更新時(shí)間：2017年08月31日 08:58:42 投稿：jingxian

下面小編就為大家?guī)硪黄猨query操作ul的一些操作筆記整理(干貨)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

1、html標(biāo)記

 <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)
    {
     //表示為最后一個(gè)元素
     if (index == len) {
      values += $(value).attr("data-text");
     }
     else {
      values += $(value).attr("data-text") + ",";
     }
    })
   }
   console.log(values);
  }

輸出結(jié)果;111,222,333

2、編輯的時(shí)候初始化ul的li項(xiàng)

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的一些操作筆記整理(干貨)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

jquery
ul

相關(guān)文章

JS實(shí)現(xiàn)兼容各瀏覽器解析XML文檔數(shù)據(jù)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)兼容各瀏覽器解析XML文檔數(shù)據(jù)的方法,涉及javascript對(duì)XML文件的解析技巧,并根據(jù)各瀏覽器進(jìn)行了相關(guān)調(diào)整,具有良好的兼容性,需要的朋友可以參考下
2015-06-06
js實(shí)現(xiàn)json數(shù)組分組合并操作示例
這篇文章主要介紹了js實(shí)現(xiàn)json數(shù)組分組合并操作,涉及javascript針對(duì)json數(shù)組的遍歷、判斷、添加、賦值等相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
原生JS實(shí)現(xiàn)pc端輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)pc端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
微信小程序中實(shí)現(xiàn)自定義Navbar方法詳解
這篇文章主要介紹了微信小程序中實(shí)現(xiàn)自定義Navbar方法,Navbar由 StatusBar和TitleBar組成,只需要知道它們各自的高度,就可以很好地完成自定義,需要的朋友可以參考下
2024-05-05
基于JS實(shí)現(xiàn)簡(jiǎn)單的樣式切換效果代碼
這篇文章主要介紹了基于JS實(shí)現(xiàn)簡(jiǎn)單的樣式切換效果代碼,涉及簡(jiǎn)單的javascript控制頁面元素樣式變換的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-09-09
html判斷當(dāng)前頁面是否在iframe中的實(shí)例
下面小編就為大家?guī)硪黄猦tml判斷當(dāng)前頁面是否在iframe中的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
JavaScript閉包實(shí)例講解
眾所周知，JavaScript沒有塊級(jí)作用域，只有函數(shù)作用域。那就意味著定義在函數(shù)中的參數(shù)和變量在函數(shù)外部是不可見的，而在一個(gè)函數(shù)內(nèi)部任何位置定義的變量，在該函數(shù)內(nèi)部任何地方都可見
2014-04-04
Javascript生成器（Generator）的介紹與使用
這篇文章主要給大家介紹了關(guān)于Javascript生成器（Generator）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
javascript生成不重復(fù)的隨機(jī)數(shù)
這篇文章主要介紹了javascript在指定范圍內(nèi)生成不重復(fù)的隨機(jī)數(shù)的方法和相關(guān)實(shí)例，有需要的小伙伴可以參考下。
2015-07-07
JavaScript?自定義對(duì)象方法匯總
這篇文章主要介紹了JavaScript?自定義對(duì)象,主要介紹一些方法object創(chuàng)建對(duì)象、使用構(gòu)造函數(shù)創(chuàng)建對(duì)象、字面量創(chuàng)建對(duì)象、等展開話題，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2021-12-12