jQuery:如何匹配不相邻的类序列

Question

我正在尝试使用 jQuery 来匹配一系列不相邻的同级，但似乎无法获得正确的选择器。

问题是这样的:

我有一个包含段落和标题的文档。标题具有类名称，例如 .one、.two、. Three 和 . Five。

我想匹配以特定模式显示的所有标题。例如:.one、.one、.三、. Five。我想匹配这个序列，而不管每个标题之间有多少其他标题。

这是陈述目标的另一种方式。从文档顶部开始，我想要:

1. 找到出现的第一个 .one 标题。
2. 然后匹配下一个 .one 标题
3. 然后匹配下一个 .two 标题
4. 然后匹配下一个 . Five 标题

重复

1. 查找下一个 .one 标题
2. 然后匹配下一个 .one 标题
3. 然后匹配下一个 .two 标题
4. 然后匹配下一个 . 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 fiddle :

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/