Jquery 작업 ul 기술 요약

아래 편집기는 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>

JS

1.li 속성의 값을 가져오는 데 사용합니다.

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

위 내용은 Jquery 작업 ul 기술 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!