next() and nextall >

Question

I have the following structure

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

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

I am using Jquery.load() function and it looks like so:

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

This works to get me to the h2.. but I can't seem to get to the NEXT element.. do they have to match? ie do they all have to be the same tags. I tried:

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

but it does not work.. I need to select 3 li's FOLLOWING each specified h2

Thanks in advance.

Answer 1

Building off of @Kundan Singh Chouhan's answer, the exact same thing would just be done in CSS without any JavaScript at all.

DEMO: http://jsfiddle.net/dfUH8/12/

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

Although, this will only work in newer browsers that support CSS3 where as the JavaScript version will work everywhere.

Answer 2

Firstly, you are using a jquery method within css selectors. That is invalid css. Secondly, this seemed to work for me:

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

This css will select the adjacent ul, the direct descendant of that ul, the lis, and of those, the first three.

Answer 3

Try this instead :

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

Working Demo