Question

我正在尝试使用jQuery来匹配一系列不相邻的兄弟姐妹，但似乎无法让选择器正确。

问题在于：

我有一个带有段落和标题的文件。标题包含类别名称，例如.one，.two，.three和.five。

我希望匹配以特定模式显示的所有标题。例如：.one，.one，.three，.five。无论每个序列之间的其他标题的数量如何，我都希望匹配此序列。

这是说明目标的另一种方式。从文档的顶部开始，我想：

找到显示的第一个.one标题。
然后匹配下一个.one标题
然后匹配下一个.three标题
然后匹配下一个.five标题

重复

找到下一个.one标题
然后匹配下一个.one标题
然后匹配下一个.three标题
然后匹配下一个.five标题

再次重复，直到文档结束。

我使用nextAll()非常接近：

headings = $('.one').nextAll('.one, .three, .five').addBack();
headings.css('color', 'red');

这是HTML：

<h1 class="one">One</h1><!-- Select this -->
<p class="a">One</p>
<p class="b">One</p>
<p class="c">One</p>
<p class="d">One</p>

<h1 class="one">One</h1><!-- Select this -->
<p class="a">a</p>
<p class="b">b</p>

<h1 class="three">Three</h1><!-- Select this -->
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>

<h1 class="one">One</h1><!-- DON'T SELECT THIS -->
<p class="a">a</p>

<h1 class="four">Three</h1>
<p class="a">a</p>

<h1 class="five">Five</h1><!-- Select this -->
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="d">d</p>

问题在于它匹配.one的每个实例，当我只想要前两个而不是第三个时。有没有办法做到这一点？

这是我尝试过的JS小提琴：

http://jsfiddle.net/n7B55/1/

Answer 1

您可以使用数组和filter方法。

var selector = ['one', 'one', 'three', 'five'],
    i = 0;    

$('h1').filter(function() {
   var match = $(this).hasClass(selector[i]); 
   if (match) i++;
   i = i % selector.length;
   return match;
}).css('color', 'red');

http://jsfiddle.net/u7BUd/

jQuery：如何匹配非相邻的类序列

1 个答案: