jQuery操作ULスキルまとめ-jsチュートリアル-php.cn

jQuery操作ULスキルまとめ

巴扎黑

リリース： 2017-09-01 11:22:47

オリジナル

1647 人が閲覧しました

以下のエディターは、jquery 操作 ul の操作メモ (乾いた情報) を提供します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして一緒に見てみましょう

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>  <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>  <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>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></li>
 </ul>

ログイン後にコピー

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(&#39;,&#39;);
   $.each(arr, function (index, value) {  
     $("#attachText").prepend("<li data-value=\"" + $.parseJSON(data).data + "\"><a>查看附件</a>  <a>删除</a></li>");     
   });
  }

ログイン後にコピー

以上がjQuery操作ULスキルまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。