0

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

下面是 HTML 元素的样例：

<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>

在这种情况下，因为programe2andprograme12有一个span1hr类，programe3并且programe14有一个span0hr类，我想在每个集合上找到row3一个类，span1hr旁边row4有一个类span0hr，以更改每个类中的类，row3将其从更改为span1hr，而其余span1hrfor30mins类span0hr中的类row4不变。对于programe7and中具有与andprograme8不匹配的类 'span1hr' 的其他类，我想忽略它。programe2programe12

我已经尝试过这样的代码，但它会搜索row3html 中的每一组而不检查两个不同的集合row3并row4更改类。

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

有谁知道我该怎么做？

4

3 回答 3

1

如果我正确理解您的问题，它可以比这更简单（诚然，在我觉得我理解您正在寻找的内容之前，我必须多次阅读逻辑：D）。这应该有效：

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

这将抓取所有同时具有和类的元素，并且在具有和row4类span0hr的元素之后立即发生。然后它会使用 退回到第一个元素（即元素），添加类，然后删除类。row3span1hr.row3.span1hr.prev()span1hrfor30minsspan1hr

于 2013-07-19T17:27:31.960 回答
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');
    }
});

在 jsFiddle 上查看现场演示。

进一步阅读：

于 2013-07-19T16:32:46.150 回答
1

我认为这项工作适合你。

$('.span1hr').each(function(){
    if ($(this).next().hasClass('span0hr')) {
        $(this).removeClass('span1hr');
        $(this).addClass('span1hrfor30mins');
    }
});
于 2013-07-19T16:33:57.527 回答