javascript - 根据内容更改样式

Question

我有一个html

<div class="common">
<p class="special">
    <p class="child">test1</p>
</p>
<p class="special">
    <p class="child">test2</p>
</p></div>

如您所见，我有两个样式相同但内容不同的段落，我只想更改内容包含“test1”的段落的样式，写了这样的东西

$(".common").each(function () {
if ($(this).find('.special').find('.child').text() == "test1")
{
    $(this).find('.special').find('.child').css('background','red');
}});

但是样式应用于两个段落，在 javascript/jquery 中是否有任何解决方案来解决这个问题

Answer 1

您的 html 无效 - p 元素不能包含另一个 p 元素

<div class="common">
    <div class="special">
        <p class="child">test1</p>
    </div>
    <div class="special">
        <p class="child">test2</p>
    </div>
</div>

然后

$(".common .special .child").each(function () {
    if ($(this).text() == "test1") {
        $(this).css('background', 'red');
    }
});

演示:Fiddle

您的代码将在每个.common中找到第一个.special .child元素，如果它的文本与测试用例匹配，那么它会将样式应用于所有.special .child.common` 中的元素