8

関連する投稿を読みましたが、IEの解決策が見つからなかったため、この問題のjQueryソリューションを求めます。

私はこのようなネストされた階層的な見出しをいくつか持っています

<h1> heading 1</h1> 
<h2> subheading 1</h2>
<h1> heading 2</h1> 
<h2> subheading 1</h2>
<h2> subheading 2</h2>

次のような自動見出し出力が必要です。

1. heading 1
1.2 subheading 1
2. heading 2
2.1. subheading 1
2.2. subheading 2

IE6 +で動作するjQueryなどを使用してこれを実現する方法はありますか？

4

5 に答える 5

7

これが私の見解です：

var segments = [];

$(':header').each(function() { 

  var level = parseInt(this.nodeName.substring(1), 10);

  if(segments.length == level) {
    // from Hn to another Hn, just increment the last segment
    segments[level-1]++;
  } else if(segments.length > level) {
    // from Hn to Hn-x, slice off the last x segments, and increment the last of the remaining
    segments = segments.slice(0, level);
    segments[level-1]++;
  } else if(segments.length < level) {
    // from Hn to Hn+x, (should always be Hn+1, but I'm doing some error checks anyway)
    // add '1' x times.
    for(var i = 0; i < (level-segments.length); i++) {
      segments.push(1);
    }
  }

  $(this).text(segments.join('.') + '. ' + $(this).text());

});

すべてのレベルでの実例、H1-H6

于 2011-02-26T14:27:04.913 に答える
6

別の可能性

var indices = [];

function addIndex() {
  // jQuery will give all the HNs in document order
  jQuery('h1,h2,h3,h4,h5,h6').each(function(i,e) {
      var hIndex = parseInt(this.nodeName.substring(1)) - 1;

      // just found a levelUp event
      if (indices.length - 1 > hIndex) {
        indices= indices.slice(0, hIndex + 1 );
      }

      // just found a levelDown event
      if (indices[hIndex] == undefined) {
         indices[hIndex] = 0;
      }

      // count + 1 at current level
      indices[hIndex]++;

      // display the full position in the hierarchy
      jQuery(this).prepend(indices.join(".")+" "+this.tagName);

  });
}

jQuery(document).ready(function() {
  addIndex();
});
于 2011-02-26T14:51:07.570 に答える
1

正直言って、すべてのタグの直後と次のタグの直前に<h2>続くすべてのタグを取得できれば、問題は解決しますよね？<h1><h1>

このコードはそれを作り、うまく機能しています

$("h1").each(function(mainHeadIndex)
 {
     // Numbering the main heads
     $(this).html(mainHeadIndex +1 +'. ' + $(this).html());

     // Find all the h2 tags right under this particular main head
     $(this).nextUntil("h1").filter("h2").each(function(subIndex)
      {
          // calculate the right sub head number
          var newSubIndex = subIndex+1;
          // Numbering the sub heads
          $(this).html(mainHeadIndex +1 +'.'+ newSubIndex +$(this).html());
      });
  })

このリンクでテストできます

PS：MatejBに感謝します、あなたの投稿の前にjsfiddle.comを知りませんでした:)

于 2011-02-26T13:47:29.167 に答える
0


H2小見出しをDIVでラップしてから、次のコードを使用する必要があると思います。 

$（document）.ready（function（）{
    var result = 0;
    $（'h1'）。each（function（index）{
        $（this）.text（（index + 1）+'。'+ $（this）.text（））;
        varsaveIndexNum=インデックス+1;
        $（this）.next（）。find（'h2'）。each（function（index）{
            $（this）.text（saveIndexNum +'。'+（index + 1）+'' + $（this）.text（））;
        }）;
    }）;
}）;

これを試して



<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
    var result = 0;
    $('h1').each(function(index) {
        $(this).text((index + 1) + '. ' + $(this).text());
        var saveIndexNum = index + 1;
        $(this).next().find('h2').each(function(index) {
            $(this).text(saveIndexNum + '.' +(index + 1) + ' ' + $(this).text());
        });
    });
});
</script>
<style>
h1
{
     color:red;
}
.subheading h2
{
    color:green;
}
.subheading
{
    background:#e2e2e2;
}
</style>
</head>
<body>
<h1> heading 1</h1> 
<div class="subheading">
    <h2> subheading 1.1</h2>
</div>
<h1> heading 2</h1> 
<div class="subheading">
    <h2> subheading 2.1</h2>
    <h2> subheading 2.2</h2>
    <h2> subheading 2.3</h2>
    <h2> subheading 2.4</h2>
    <h2> subheading 2.5</h2>
</div>
<h1> heading 3</h1> 
<div class="subheading">
    <h2> subheading 3.1</h2>
    <h2> subheading 3.2</h2>
</div>
<h1> heading 4</h1> 
<div class="subheading">
    <h2> subheading 4.1</h2>
    <h2> subheading 4.2</h2>
</div>
</body></html>
于 2011-02-26T14:27:17.447 に答える
0

これは私のために働く：

変数 i = 0;
変数 j = 0;
$('h1').each(関数(インデックス, 要素){
    i++;
    $(要素).text(i + '.' + $(要素).text());

    j = 1;
    $(要素).nextUntil('h1').each(関数(サブインデックス, サブ要素){
        if (!$(this).is('h2')) return; // したがって、h2 以外のサブ要素はそのままにしておくことができます
        j++;
        $(サブエレメント).text(i + '.' + j + '.' + $(サブエレメント).テキスト());
    });
});

jsfiddle のウォーキングの例。

于 2011-02-26T13:18:06.417 に答える