【jquery】結合class選擇器、next、prev方法實現相鄰的節點展開隱藏效果

在頁面效果中，有時候我們程序循環出來的列不能加上ID屬性，因為可能有列表可能會循環出多個相同的ID，這樣就不能使用Jquery的ID選擇器，這時候 我們可以使用Class選擇器,

同時我們也可能需求是對此節點元素的操作只局限於當前的div（或table中），我們看代碼：

 
          <! 
          DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
          > 
          
 
          < 
          html  
          xmlns 
          ="http://www.w3.org/1999/xhtml" 
          > 
          
 
          < 
          head 
          > 
          
     
          < 
          meta  
          http-equiv 
          ="Content-Type" 
           content 
          ="text/html; charset=utf-8" 
            
          /> 
          
     
          < 
          title 
          >jquery效果 
          </ 
          title 
          > 
          
     
          < 
          script  
          src 
          ="http://common.cnblogs.com/script/jquery.js" 
           type 
          ="text/javascript" 
          ></ 
          script 
          > 
          
     
          < 
          script  
          type 
          ="text/javascript" 
          > 
          
         
          // 
          展開隱藏層 
          
 
                  $(document).ready( 
          function 
           () {
            $( 
          " 
          .part 
          " 
          ).click( 
          function 
           () {
                 
          var 
           hideP  
          = 
           $( 
          this 
          ).next();
                 
          if 
           (hideP.css( 
          ' 
          display 
          ' 
          )  
          == 
            
          ' 
          none 
          ' 
          ) {
                    hideP.show();
                    $( 
          this 
          ).hide();
                }
                 
          else 
           {
                    hideP.hide();
                    $( 
          this 
          ).show();
                }
            });
            $( 
          " 
          .all 
          " 
          ).click( 
          function 
           () {
                 
          var 
           hideP  
          = 
           $( 
          this 
          ).prev();
                 
          if 
           (hideP.css( 
          ' 
          display 
          ' 
          )  
          == 
            
          ' 
          none 
          ' 
          ) {
                    hideP.show();
                    $( 
          this 
          ).hide();
                }
                 
          else 
           {
                    hideP.hide();
                    $( 
          this 
          ).show();
                }
            });
        });  
 
          </ 
          script 
          > 
          
 
          </ 
          head 
          > 
          
 
          < 
          body 
          > 
          
     
          <!-- 
          循環出來的div 
          --> 
          
     
          < 
          div  
          class 
          ='classA' 
          > 
          
         
          < 
          p  
          class 
          ="part" 
          >內容1 
          </ 
          p 
          > 
          
         
          < 
          p  
          class 
          ="all" 
           style 
          ="display:none" 
          >內容1，哈哈哈，我展開了，這里是更多內容哈 
          </ 
          p 
          > 
          
     
          </ 
          div 
          > 
          
     
          < 
          div  
          class 
          ='classA' 
          > 
          
         
          < 
          p  
          class 
          ="part" 
          >內容2 
          </ 
          p 
          > 
          
         
          < 
          p  
          class 
          ="all" 
           style 
          ="display:none" 
          >內容2，哈哈哈，我展開了，這里是更多內容哈 
          </ 
          p 
          > 
          
     
          </ 
          div 
          > 
          
     
          < 
          div  
          class 
          ='classA' 
          > 
          
         
          < 
          p  
          class 
          ="part" 
          >內容3 
          </ 
          p 
          > 
          
         
          < 
          p  
          class 
          ="all" 
           style 
          ="display:none" 
          >內容3，哈哈哈，我展開了，這里是更多內容哈 
          </ 
          p 
          > 
          
     
          </ 
          div 
          > 
          
 
          </ 
          body 
          > 
          
 
          </ 
          html 
          > 
         

 

也就是說我想展開 classA處的隱藏內容，同時不影響到其他相同的classA處的內容。其實這里重點也就是jquery next、prev方法的使用，當然還可以用於其他場合。