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

提前致谢。

Answer 1

首先，您在 css 选择器中使用 jquery 方法。那是无效的CSS。其次，这似乎对我有用：

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

这个 css 将选择相邻ul的，that 的直接后代，uls li，以及这些的前三个。

Answer 2

试试这个：

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

工作演示

Answer 3

以@Kundan Singh Chouhan 的回答为基础，完全一样的事情将在没有任何 JavaScript 的 CSS 中完成。

演示：http: //jsfiddle.net/dfUH8/12/

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

虽然，这仅适用于支持 CSS3 的较新浏览器，因为 JavaScript 版本将适用于任何地方。