jQuery自動見出し番号付け

Question

私は10-15 H2タグの字幕を持つウェブサイト上の記事を持っています。何かが好きです。

<h1>Name of article</h1> 
<h2>Subtitle</h2> 
<p>.....</p> 
<h2>Subtitle</h2> 
<p>.....</p> 
<h2>Subtitle</h2> 
<p>.....</p> 
<h2>Subtitle</h2> 
<p>.....</p> 

したがって、問題は、H2タグ（字幕）の番号を降順で自動的にjQueryによって与えることです。

<h1>Name of article</h1> 
<h2>15.Subtitle</h2> 
<p>.....</p> 
<h2>14.Subtitle</h2> 
<p>.....</p> 
<h2>13.Subtitle</h2> 
<p>.....</p> 
<h2>12.Subtitle</h2> 
<p>.....</p> 

私はCSSカウンターでそれを行う方法を知っていますが、記事には異なる数の字幕を入れることができます。私は同様のAutomatic Numbering of Headings H1-H6 using jQueryトピックをチェックしましたが、正確に欲しいとは思いません。

Answer 1

これは

var h2Elements = $('.content').find('h2'); 
 
var h2ElemCount = h2Elements.length; 
 
$(h2Elements).each(function(i) { 
 
    $(this).prepend(h2ElemCount - i + '. '); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="content"> 
 
    <h1>Name of article</h1> 
 
    <h2>Subtitle</h2> 
 
    <p>.....</p> 
 
    <h2>Subtitle</h2> 
 
    <p>.....</p> 
 
    <h2>Subtitle</h2> 
 
    <p>.....</p> 
 
    <h2>Subtitle</h2> 
 
    <p>.....</p> 
 
</div>

Answer 2

はこれを試してみてください。

var h2Length = $("h2").length; 
$("h2").each(function(i,obj) { 
    $(obj).html(h2Length +". "+$(obj).html()); 
    h2Length--; 
}); 

Answer 3

あなたはeach機能を使用することにより、後方数に入れることができます。

allItems = $("h2").length; 
 
$("h2").each(function (index){ 
 
    $(this).prepend(allItems - index + ". "); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Name of article</h1> 
 
<h2>Subtitle</h2> 
 
<p>.....</p> 
 
<h2>Subtitle</h2> 
 
<p>.....</p> 
 
<h2>Subtitle</h2> 
 
<p>.....</p> 
 
<h2>Subtitle</h2> 
 
<p>.....</p>