HOME > > > > >

:header Selector

h1~h6を取得

サンプル

.jqTestの中のheadlineにボーダーを付けてインラインリンクを作成する。

実行結果

まーさん沢村賞おめ

  • list 0
  • list 1

まさお沢村賞

ここは文章

まさお沢村賞

定義語
定義後の説明

まさお三冠とったどー

来年もよろしくおねがいします。
見出し6

Javascript

  1. $('.jqTest :button').click(function(){
  2.     var ul = $('<ul>');
  3.  
  4.     $(':header', '.jqTest')
  5.     .css('border', '1px solid #990000')
  6.     .each(function(i){
  7.         $(this).attr('id', $(this)[0].tagName + '-' + i);
  8.         ul.append(
  9.             $('<li>').html($('<a>',
  10.                              { href: '#' + $(this)[0].tagName + '-' + i,
  11.                                text: $(this).text() }
  12.                              ))
  13.         );
  14.     });
  15.  
  16.     $(this).closest('.jqTest').prepend(ul);
  17. });

HTML

  1. <div class="jqTest">
  2.     <h1>まーさん沢村賞おめ</h1>
  3.     <ul>
  4.         <li>list 0</li>
  5.         <li>li<span>st 1</span></li>
  6.     </ul>
  7.  
  8.     <h2>まさお沢村賞</h2>
  9.  
  10.     <p title="p">ここは文章</p>
  11.  
  12.     <h3>まさお沢村賞</h3>
  13.  
  14.     <dl class="header">
  15.         <dt>定義語</dt>
  16.         <dd>定義後の説明</dd>
  17.     </dl>
  18.     <h4>まさお三冠とったどー</h4>
  19.  
  20.     <h5>来年もよろしくおねがいします。</h5>
  21.  
  22.     <h6>見出し<span>6</span></h6>
  23.  
  24.     <hr />
  25.  
  26.     <button>ハイライト</button>
  27. </div>