h3タグの奇数番目を取得する方法

h3の奇数番目をh2を基準に取得するにはどうしたらいいでしょうか。
1番目は取得しないようにしたいです。

HTML
1<h2>見出し</h2>
2<h3>取得しない</h3>
3<h3>取得しない</h3>
4
5<h2>見出し</h2>
6<h3>取得しない</h3>
7<h3>取得しない</h3>
8<h3>取得する</h3>
9
10<h2>見出し</h2>
11<h3>取得しない</h3>
12<h3>取得しない</h3>
13<h3>取得する</h3>
14<h3>取得しない</h3>
15<h3>取得する</h3>

いろいろ考えたのですがセレクタだけでは難しいですか？

jQuery
1$('.class').find('h3:not(:first):nth-child(odd)');

jQuery
1$('.class').find('h2~h3:nth-child(odd)');

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんなかんじ

javascript
1<script>
2$(function(){
3  $('h2').each(function(){
4    $(this).attr('data-group',$('h2').index(this));
5  });
6  $('h3').each(function(){
7    $(this).attr('data-group',$(this).prevAll('h2').attr('data-group'));
8  });
9  $('h3').filter(function(){
10    var idx=$('h3[data-group='+$(this).attr('data-group')+']').index(this);
11    return idx%2==1 || idx==0;
12  }).css('color','red');
13});
14</script>
15<h2>見出し</h2>
16<h3>取得しない</h3>
17<h3>取得しない</h3>
18
19<h2>見出し</h2>
20<h3>取得しない</h3>
21<h3>取得しない</h3>
22<h3>取得する</h3>
23
24<h2>見出し</h2>
25<h3>取得しない</h3>
26<h3>取得しない</h3>
27<h3>取得する</h3>
28<h3>取得しない</h3>
29<h3>取得する</h3>
30<h3>取得しない</h3>
31<h3>取得する</h3>
32<h3>取得しない</h3>
33<h3>取得する</h3>
34<h3>取得しない</h3>
35<h3>取得する</h3>

投稿2019/11/05 04:55

yambejp

総合スコア116694

ministop

2019/11/05 05:39

早速の回答ありがとうございます！無事思い通りになりました！ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

h3タグの奇数番目を取得する方法

関連した質問