1. 程式人生 > >jq 節點操作

jq 節點操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script src="jquery1.8.3.min.js"></script>
  <style>
    *{list-style:none;padding:0px;margin:0px;}
    .plus{padding-left:35px;background:url(z-plus.jpg)no-repeat top left;}
    .minus{padding-left:35px;background:url(z-sub.jpg)no-repeat top left;}
    .end{padding-left:50px;background:url(z-end.gif)no-repeat left center;}
  </style>
  <script>
     $(document).ready(function(){
           $("#tree li:not(':has(ul)')").addClass('end');//not留下不匹配的。說的是即使li,又不符合has(ul)這個規則 即是li又不包含ul的留下
           $("#tree li:has(ul)").addClass('plus');//即是li又包含ul的留下
           $("#tree ul").hide();//hide隱藏   1000ms  1000ms隱藏    hide()
           $("span").click(function(e){//event=window.event
                 var  cc=e.target;//獲取事件源
                 var cctype=cc.type;//e是jquery事件物件   有自己的屬性  target屬性:事件源
                 if(cctype=='checkbox'){
                      if($(cc).prop("checked")){//判斷事件源是是選中狀態
                           $(cc).parent().parent().find(":checkbox").prop("checked",true);
                           //通過checkbox找到span 找到 li 找到ul prev找到上一個span,操作span中checkbox被選中
                           findFather(cc);
                      }else{
                           $(cc).parent().parent().find(":checkbox").prop("checked",false)
                           unCheckedFather(cc);
                      }
                 }else{
                       var li=$(this).parent();
                       if(li.hasClass('minus')){//hasClass 含有-
                              $(this).next().hide();//show顯示  $(this)是span  .parent() li
                              $(this).parent().removeClass('minus').addClass('plus')//先找到li、 移除-  新增+
                       }else{
                             $(this).next().show();//show顯示  $(this)是span  .parent() li
                             $(this).parent().removeClass('plus').addClass('minus')//先找到li、 移除+  新增-
                       }
                 }   
           });
     });
     /*遞迴:演算法。自己呼叫自己  setTimeout*/
   function findFather(obj){
     if($(obj).parent().parent().parent().attr("id")!='tree'){
         var father=$(obj).parent().parent().parent().prev().find(":checkbox");
         father.prop("checked",true);
         findFather(father)
      }     
   }

    function unCheckedFather(obj){
       if($(obj).parent().parent().parent().attr("id")!='tree'){
        var sibChecked=$(obj).parent().parent().siblings().has(":checked") ;
        var father=$(obj).parent().parent().parent().prev().find(":checkbox");
          if(sibChecked.size()==0){
               father.prop("checked",false);
               unCheckedFather(father);
           }
        }
     }
  </script>
 </HEAD>
 <BODY>
  <ul id="tree">
         <li>
            <span><input type="checkbox"/>節點1</span>
            <ul>
               <li>
                  <span><input type="checkbox"/>節點11</span>
                   <ul>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>節點11</span>
                   <ul>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>節點11</span>
                   <ul>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                   </ul>
               </li>
            </ul>
       </li>
       <li>
            <span><input type="checkbox"/>節點1</span>
            <ul>
               <li>
                  <span><input type="checkbox"/>節點11</span>
                   <ul>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>節點11</span>
                   <ul>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>節點11</span>
                   <ul>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                   </ul>
               </li>
            </ul>
       </li>
       <li>
            <span><input type="checkbox"/>節點1</span>
            <ul>
               <li>
                  <span><input type="checkbox"/>節點11</span>
                   <ul>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>節點11</span>
                   <ul>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                   </ul>
               </li>
               <li>
                  <span><input type="checkbox"/>節點11</span>
                   <ul>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                      <li><span><input type="checkbox"/>節點111</span></li>
                   </ul>
               </li>
            </ul>
       </li>
    </ul>
 </BODY>
</HTML>