jquery - next（）およびnextall>

Question

私は次の構造を持っています

<h2> title </h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>

<h2> title 2 </h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>

私はJquery.load()関数を使用していますが、次のようになります。

<script> $('#result').load('http://www.mysite/page h2:contains(title)'  ) ;

これは私をh2に到達させるために機能しますが、NEXT要素に到達できないようです。それらは一致する必要がありますか？つまり、それらはすべて同じタグである必要がありますか。私は試した：

<script> $('#result').load('http://www.mysite/page h2:contains(title).next(li:lt(3)'  ) ;

しかし、それは機能しません..指定された各h2に続く3つのliを選択する必要があります

前もって感謝します。

score 1 · Accepted Answer

まず、cssセレクター内でjqueryメソッドを使用しています。それは無効なcssです。第二に、これは私にとってはうまくいくようでした：

$('#result').load('http://www.mysite/page h2:contains(title) + ul > li:nth-child(-n+3)');

このcssは、隣接するul、その直接の子孫であるuls li、およびそれらの最初の3つを選択します。

score 0 · Accepted Answer

代わりにこれを試してください：

$('#result').load('http://www.mysite/page h2:contains(title) + ul li:nth-child(1),li:nth-child(2)');

score 0 · Accepted Answer

@Kundan Singh Chouhanの回答に基づいて、JavaScriptをまったく使用せずにCSSでまったく同じことが実行されます。

h2 + ul li:nth-child(1),
li:nth-child(2){
    background-color: red;
}

ただし、これはCSS3をサポートする新しいブラウザでのみ機能しますが、JavaScriptバージョンはどこでも機能します。

3 に答える 3