jQuery h4から自動的に目次を生成する際に画像も持ってきたい

Question

★やりたいこと
jQueryで、自動的にページ内リンク付きの目次のようなリストを生成したいです。
各h4のタグのnext()の要素にあたる各img要素のURLも一緒に持ってきたいです。
現在書いているものだと、各h4要素は持ってこれていますが、各img要素の正しい持ってくれば良いかわかりません。
どなたかご教示いただけますでしょうか。
よろしくお願いいたします。

<h4>目次1</h4>
<img src="image.jpg">
<p>テキスト</p>
<h4>目次2</h4>
<img src="sample.jpg">
<p>テキスト</p>
<h4>目次3</h4>
<img src="img.jpg">
<p>テキスト</p>
<h4>目次4</h4>
<img src="image2.jpg">
<p>テキスト</p>

   $(function(){
      var idcount = 1;
      var toc = '';
      var currentlevel = 0;
      var src = $("h4").next('img').attr('src');
      $("h4",this).each(function(){
          this.id = "chapter" + idcount;
        idcount++;
          var level = 0;
          if(this.nodeName.toLowerCase() == "h4") {
              level = 1;
          }
          while(currentlevel < level) {
              toc += '<ul class="chapter">';
              currentlevel++;
          }
          while(currentlevel > level) {
              toc += "</ul>";
              currentlevel--;
          }
          toc += '<li><a href="#' + this.id + '">' + '<div class="img"><img src="' + src + '" alt=""></div>' + '<div class="txt">' + $(this).html() + '</div>' + "</a></li>\n";
      });
      while(currentlevel > 0) {
          toc += "</ul>";
          currentlevel--;
      }
      $(".toc").html(toc);
   });

以上のものを書いてから、

<div class="toc"></div>

と書くと、
完成系の表示はこのように表示されてほしいのですが↓

<div class="toc">
   <ul class="chapter">
      <li><a href="#chapter1">
         <div class="img"><img src="image.jpg"></div>
         <div class="txt">目次1</div>
      </a></li>
      <li><a href="#chapter2">
         <div class="img"><img src="sample.jpg"></div>
         <div class="txt">目次2</div>
      </a></li>
      <li><a href="#chapter3">
         <div class="img"><img src="img.jpg"></div>
         <div class="txt">目次3</div>
      </a></li>
      <li><a href="#chapter4">
         <div class="img"><img src="image2.jpg"></div>
         <div class="txt">目次4</div>
      </a></li>
   </ul>
</div>

↓現状はこのような表示で、画像が全て同じものになっています。↓

<div class="toc">
   <ul class="chapter">
      <li><a href="#chapter1">
         <div class="img"><img src="image.jpg"></div>
         <div class="txt">目次1</div>
      </a></li>
      <li><a href="#chapter2">
         <div class="img"><img src="image.jpg"></div>
         <div class="txt">目次2</div>
      </a></li>
      <li><a href="#chapter3">
         <div class="img"><img src="image.jpg"></div>
         <div class="txt">目次3</div>
      </a></li>
      <li><a href="#chapter4">
         <div class="img"><img src="image.jpg"></div>
         <div class="txt">目次4</div>
      </a></li>
   </ul>
</div>

Answer 1

h4をeachする前にsrcを取得しているからですね

var src = $("h4").next('img').attr('src');
$("h4",this).each(function(){

↓

$("h4",this).each(function(){
var src = $(this).next('img').attr('src');

Comments

[yukabyo]

こちらで解決できました。
とても助かりました。
本当にありがとうございましたm(__)m