通过jQuery或javascript更改最后一行的样式

Question

我正在使用下面的代码来更改h3标记中最后一行文本的样式。我想要的是每个h3标签的最后一行颜色为红色。现在只有最后一个h3标签的最后一行颜色为红色。任何人都可以帮忙吗？

$("h3").contents().last().wrap('<span id="lastLineTourTitle"></span>');

#lastLineTourTitle { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="product"> 
 
    <h3> 
 
    This is a test<br>and this is the last line (1). 
 
    </h3> 
 
    </div> 
 
    <div class="product"> 
 
    <h3> 
 
    This is a test<br>and this is the last line (2). 
 
    </h3> 
 
    </div> 
 
    <div class="product"> 
 
    <h3> 
 
    This is a test<br>and this is the last line (3). 
 
    </h3> 
 
    </div> 
 
</div>

Answer 1

你只需要遍历所有h3元素和单独包装的内容。

另请注意，您创建的元素具有无效的重复id属性。更改span使用class代替，就像这样：

$("h3").each(function() { 
 
    $(this).contents().last().wrap('<span class="lastLineTourTitle"></span>'); 
 
});

.lastLineTourTitle { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="product"> 
 
    <h3>Dit is een test<br>en dit is de tweede regel (1).</h3> 
 
    </div> 
 
    <div class="product"> 
 
    <h3>Dit is een test<br>en dit is de tweede regel (2).</h3> 
 
    </div> 
 
    <div class="product"> 
 
    <h3>Dit is een test<br>en dit is de tweede regel (3).</h3> 
 
    </div> 
 
</div>