★やりたいこと
jQueryで、自動的にページ内リンク付きの目次のようなリストを生成したいです。
各h4のタグのnext()の要素にあたる各img要素のURLも一緒に持ってきたいです。
現在書いているものだと、各h4要素は持ってこれていますが、各img要素の正しい持ってくれば良いかわかりません。
どなたかご教示いただけますでしょうか。
よろしくお願いいたします。
html
1<h4>目次1</h4> 2<img src="image.jpg"> 3<p>テキスト</p> 4<h4>目次2</h4> 5<img src="sample.jpg"> 6<p>テキスト</p> 7<h4>目次3</h4> 8<img src="img.jpg"> 9<p>テキスト</p> 10<h4>目次4</h4> 11<img src="image2.jpg"> 12<p>テキスト</p>
javascript
1 $(function(){ 2 var idcount = 1; 3 var toc = ''; 4 var currentlevel = 0; 5 var src = $("h4").next('img').attr('src'); 6 $("h4",this).each(function(){ 7 this.id = "chapter" + idcount; 8 idcount++; 9 var level = 0; 10 if(this.nodeName.toLowerCase() == "h4") { 11 level = 1; 12 } 13 while(currentlevel < level) { 14 toc += '<ul class="chapter">'; 15 currentlevel++; 16 } 17 while(currentlevel > level) { 18 toc += "</ul>"; 19 currentlevel--; 20 } 21 toc += '<li><a href="#' + this.id + '">' + '<div class="img"><img src="' + src + '" alt=""></div>' + '<div class="txt">' + $(this).html() + '</div>' + "</a></li>\n"; 22 }); 23 while(currentlevel > 0) { 24 toc += "</ul>"; 25 currentlevel--; 26 } 27 $(".toc").html(toc); 28 });
以上のものを書いてから、
html
1<div class="toc"></div>
と書くと、
完成系の表示はこのように表示されてほしいのですが↓
html
1<div class="toc"> 2 <ul class="chapter"> 3 <li><a href="#chapter1"> 4 <div class="img"><img src="image.jpg"></div> 5 <div class="txt">目次1</div> 6 </a></li> 7 <li><a href="#chapter2"> 8 <div class="img"><img src="sample.jpg"></div> 9 <div class="txt">目次2</div> 10 </a></li> 11 <li><a href="#chapter3"> 12 <div class="img"><img src="img.jpg"></div> 13 <div class="txt">目次3</div> 14 </a></li> 15 <li><a href="#chapter4"> 16 <div class="img"><img src="image2.jpg"></div> 17 <div class="txt">目次4</div> 18 </a></li> 19 </ul> 20</div>
↓現状はこのような表示で、画像が全て同じものになっています。↓
html
1<div class="toc"> 2 <ul class="chapter"> 3 <li><a href="#chapter1"> 4 <div class="img"><img src="image.jpg"></div> 5 <div class="txt">目次1</div> 6 </a></li> 7 <li><a href="#chapter2"> 8 <div class="img"><img src="image.jpg"></div> 9 <div class="txt">目次2</div> 10 </a></li> 11 <li><a href="#chapter3"> 12 <div class="img"><img src="image.jpg"></div> 13 <div class="txt">目次3</div> 14 </a></li> 15 <li><a href="#chapter4"> 16 <div class="img"><img src="image.jpg"></div> 17 <div class="txt">目次4</div> 18 </a></li> 19 </ul> 20</div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/12 09:10