追加<a>使用jQuery

Question

我使用我的網頁jQuery的手風琴，這裏是HTML，

<div class="forms-cont"> 
    <h5> 
     Accordian Examples</h5> 
    <div class="accordian"> 
     <div> 
      <h2 class="sch-hdr"> 
       Header One</h2> 
      <div class="sch-cont levelOne"> 
       <p> 
        this is a title text - level one</p> 
      </div> 
     </div> 
     <div class=""> 
      <h2 class="sch-hdr"> 
       Header Two</h2> 
      <div class="sch-cont levelOne"> 
       <p> 
        This is another title text - level one 
       </p> 
       <div class="martop10"> 
        <h3 class="subgr-hdr"> 
         Staff</h3> 
        <div class="sch-cont levelTwo"> 
         <p> 
          This is an inner text 
         </p> 
        </div> 
       </div> 
       <div class=""> 
        <h3 class="subgr-hdr"> 
         Manager</h3> 
        <div class="sch-cont levelTwo"> 
         <p> 
          This is an inner text 
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

在此，我需要附加的手風琴工作錨標記，這裏是我的jQuery，

$(document).ready(function() { 

    // Accordian Main 
    $('.accordion h2, .accordion h3').addClass('closed'); 
    $('.levelOne,.levelTwo').hide(); 
    $('.accordion h2, .accordion h3').each(function() { 
      $(this).html(function() { 
      var headertext = '<a href="#">' + $(this).html() + '</a>'; 
      return headertext; 
     }); 
    }); 

    // Level 1 Accordian 
    $(".accordion h2 a").click(function() { 
     alert('hi'); 
      $(this).next(".levelOne").slideToggle("slow"); 
      $(this).toggleClass("closed"); 
      return false; 
    }); 
    // Level 2 Accordian 
    $('.accordion h3 a').click(function() { 
      $(this).parent().next(".levelTwo").slideToggle("slow"); 
      $(this).parent().toggleClass("closed"); 
      return false; 
    }); 
    }); 

但我無法在H2和H3中附加錨。任何幫助？

Answer 1

編輯：對不起，是wrapInner（）來代替，如果包裹（）。

三兩件事：

1）你不需要的。每個（），簡單地說：

$('.accordion h2, .accordion h3').wrapInner('<a href="#"></a>'); 

2）。在你的HTML一個錯字：

<div class="accordian"> <-- accordion? 

3）「h2 a」點擊事件中缺少「父（）」：

$(".accordion h2 a").click(function() { 
     $(this).next(".levelOne").slideToggle("slow"); <-- actual 

$(".accordion h2 a").click(function() { 
     $(this).parent().next(".levelOne").slideToggle("slow"); <-- with parent() 

然後它會工作:)

的jsfiddle：http://jsfiddle.net/fy2uM/2

Answer 2

在代碼中的這一部分，this指函數本身，而不是對象：

$('.accordion h2, .accordion h3').each(function() { 
     $(this).html(function() { 
     var headertext = '<a href="#">' + $(this).html() + '</a>'; // <-- HERE 
     return headertext; 
    }); 
}); 

SE這個代替：

$('.accordion h2, .accordion h3').each(function() { 
     var that = this; 
     $(this).html(function() { 
     var headertext = '<a href="#">' + $(that).html() + '</a>'; 
     return headertext; 
    }); 
}); 

這裏有一個JSFIDDLE證明它

Answer 3

外貌像你拼錯手風琴：

將其更改爲：

$('.accordian h2, .accordian h3').each(function() { 
      $(this).html(function() { 
      var headertext = '<a href="#">' + $(this).html() + '</a>'; 
      return headertext; 
     }); 
    }); 

見JS這裏小提琴http://jsfiddle.net/HukJE/4