Question

我有以下HTML：

<article>
    <a href="#" title="Title">
        <span class="row first">
            <span class="col">
                <span class="articleTitle">Article title</span>
                <span class="row">
                    <span class="tel">12345</span>
                    <span class="mail">test@domain.com</span>               
                </span>                     
            </span>
            <span>
                <span class="articleFlag flagNone"></span>
            </span>
        </span>
    </a>
</article>
<article>
    <a href="#" title="Title">
        <span class="row first">
            <span class="col">
                <span class="articleTitle">Article title</span>
                <span class="row">
                    <span class="tel">12345</span>
                    <span class="mail">test@domain.com</span>               
                </span>                     
            </span>
            <span>
                <span class="articleFlag flagRed"></span>
            </span>
        </span>
    </a>
</article>

现在我想用类＆＃39; articleTitle＆＃39;来改变跨度的背景颜色。为了红色，如果班级没有'没有'＆＃39;在本文中设置。它应该只在本文中改变，而不是在下面的文章中。

我试过了：

$(document).ready(function() {
    if ($('.articleFlag.flagNone')) {
        $('.articleFlag.flagNone').closest('.articleTitle').css("background", "red");
    }
});

但它不起作用。有什么想法吗？

Answer 1

您好请检查此Demo

$(document).ready(function() {
    if ($('.articleFlag.flagNone').length>0) {
        $('.articleFlag.flagNone').closest('.row').find('.articleTitle').css("background-color", "red");
    }
});

我认为它会对你有所帮助

Answer 2

使用jQuery的:has()选择器（demo）

$(document).ready(function() {
    if ($('.articleFlag.flagNone')) {
        $('.row:has(.flagNone) .articleTitle').css("background", "red");
    }
});

Answer 3

最近遍历dom树，这就是你的选择器不起作用的原因

尝试以下js代码

  if ($('.articleFlag.flagNone')) {
     $('.articleFlag.flagNone').parents('.row:eq(0)').find('.articleTitle').css("background", "red");
      }

更改背景颜色最接近的类

3 个答案: