Question

我有一个HTML

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

如你所见，我有两个相同风格但内容不同的段落，我只想更改内容包含＆＃34; test1＆＃34;的段落样式，写了这样的东西

$(".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

您的代码会找到第一个.special .child元素inside each。common and if its text matches the test case then it applies the styles to all。special .child elements within the。common`

Answer 2

您可以使用过滤器

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

Answer 3

试试这个：

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

<强> Working Demo

根据内容改变风格

3 个答案: