最後の行のスタイルを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の要素を作成していることにも注意してください。

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