3

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

这是问题所在：

我有一个带有段落和标题的文档。标题具有类名，例如.one、.two、.three和.five。

我想匹配以特定模式显示的所有标题。例如：.one, .one, .three, .five。无论每个标题之间有多少其他标题，我都想匹配这个序列。

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

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

重复

  1. 查找下一个.one标题
  2. 然后匹配下一个.one标题
  3. 然后匹配下一个.three标题
  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小提琴：

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

4

1 回答 1

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/

于 2013-05-12T20:09:03.550 回答