jquery - 检查元素时如何更改文本颜色

Question

我想在具有类的 HTML 元素中搜索，看看是否有任何元素具有类 span1hrfor30mins ，旁边的元素具有类 span1hr，然后更改row3 中每个元素的颜色，带有类 span1hr，用于循环使用的每个文本。

以下是 HTML 的示例:

<div id="programe1" class="pgmFirstRow div_1_2 row2 span1hrfor30mins">Test program</div>
<div id="programe2" class="pgmFirstRow div_1_3 row3 span1hr">NCIS</div>
<div id="programe3" class="pgmFirstRow div_1_4 row4 span0hr">CBS Evening News With Scott Pelley</div>
<div id="programe4" class="pgmFirstRow div_1_5 row5 span1hr">NCIS: Los Angeles</div>
<div id="programe5" class="pgmFirstRow div_1_6 row6">Person of Interest</div>
<div id="programe6" class="pgmFirstRow div_2_2 row2 span1hrfor30mins">Twisted</div>
<div id="programe7" class="pgmFirstRow div_2_3 row3 span1hr">Pretty Little Liars</div>
<div id="programe8" class="pgmFirstRow div_2_4 row4 span1hr">Pretty Little Liars</div>
<div id="programe9" class="pgmFirstRow div_2_5 row5 span1hr">Twisted</div>
<div id="programe10" class="pgmFirstRow div_2_6 row6 span1hr">Pretty Little Liars</div>
<div id="programe11" class="pgmFirstRow div_3_2 row2 span1hr">CNN Newsroom</div>
<div id="programe12" class="pgmFirstRow div_3_3 row3 span1hr">Around the World</div>
<div id="programe13" class="pgmFirstRow div_3_4 row4 span0hr">CNN Newsroom</div>
<div id="programe14" class="pgmFirstRow div_3_5 row5 span2hr">CNN Newsroom</div>
<div id="programe15" class="pgmFirstRow div_3_6 row6 span1hr">The Lead With Jake Tapper</div>

在本例中，由于 NCIS 和 Pretty Little Liars 有一个 span1hr 类，测试程序 和 Twisted 有一个 span1hrfor30mins 类，我想在 row2 中的每个元素的集合上找到一个 span1hrfor30mins 类通过带有 span1hr 类的 row3 来更改每个 row3 中的文本，同时保留 row2 中的其他文本不变。

我已经尝试过这样的代码，但它会搜索集合中的每个 row2 和 rows3 并且只会更改 中的红色文本row2 当我想用类 span1hr 更改 row3 中的每个文本时，旁边的 row2 类为 跨度1小时30分钟。

$('.span1hrfor30mins.row2').each(function (i, e) {
    $('+.span1hr.row3', e).length && $(e).css('color', 'red');
});

这是一个 jsfiddle 示例:http://jsfiddle.net/REjC5/6/

有人知道我该怎么做吗？

Answer 1

使用需要使用 next 方法来定位您要查找的元素。

next 获取该元素后面的直接同级元素。

$('.span1hrfor30mins.row2').each(function (i, e) {
    $(this).next('.span1hr.row3').css('color', 'red');
});

<强> Check Fiddle