Question

我的项目已经生成了带有类的HTML元素集。我想在集合中搜索以查看具有类span1hr的元素旁边是否有任何元素span0hr，然后将类从span1hr更改为{{1对于与循环一起使用的每一行。

以下是HTML元素的样子：

span1hrfor30mins

在这种情况下，由于<div id="programe1" class="pgmFirstRow div_1_2 row2"></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 span1hr">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>和programe2有一个programe12类，span1hr和programe3有一个programe14类，我会比如查看每个span0hr上的集合，row3旁边的span1hr，row4，并更改每个span0hr中的类以更改它从row3到span1hr，span1hrfor30mins中的班级span0hr保持不变。对于row4和programe7中其他类，其中“span1hr”类在programe8和programe2中不匹配，我想忽略它。

我尝试过这样的代码，但是它会在html中搜索programe12的每一组，而不会检查两个不同的集row3和row3来更改类。< / p>

row4

有谁知道我该怎么做？

Answer 1

您可以使用CSS（Sizzle）选择器表达邻接关系，并更新内部条件：

if ($('.span1hr').hasClass('row3') && $('.span0hr').hasClass('row4')) {
    $('.span1hr.row3').each(function (i, e) {
        if ($('+.span0hr.row4', e).length) {
            $(e).attr('row3');
            $(e).removeClass('span1hr').addClass('span1hrfor30mins');
        }
    });
}

事实上，由于如果选择器没有返回任何元素，将不会应用迭代，您可以完全失去外部条件：

// first select all elements with both span1hr and row3 classnames 
$('.span1hr.row3').each(function (i, e) {
    // search if the adjacent sibling of the specified selector
    // is present in the context of e
    if ($('+.span0hr.row4', e).length) {
        // do whatever we like
        $(e).attr('row3');
        $(e).removeClass('span1hr').addClass('span1hrfor30mins');
    }
});

查看live demo on jsFiddle。

进一步阅读：

Adjacent sibling selectors
jQuery(selector [, context])

Answer 2

我认为这项工作适合你。

$('.span1hr').each(function(){
    if ($(this).next().hasClass('span0hr')) {
        $(this).removeClass('span1hr');
        $(this).addClass('span1hrfor30mins');
    }
});

Answer 3

如果我正确地理解你的问题，那就更简单了（不可否认，在我理解你正在寻找的东西之前，我必须多次阅读逻辑：D）。这应该有效：

$(".row3.span1hr + .row4.span0hr").each(function(){
    $(this).prev().addClass("span1hrfor30mins").removeClass("span1hr");
});

这将抓住同时发生在row4和{{1}元素之后的span0hr和row3类 AND 的所有元素类。然后它将使用span1hr退回到第一个元素（即.row3.span1hr元素），添加.prev()类，并删除span1hrfor30mins类。

检查不同类的两个不同元素

3 个答案:

进一步阅读：