jQuery:HTML子要素のテキストを探し当てて、その親要素にクラスを追加したい

こんなHTMLテーブルがあるとします。
JSFIDDLEはこちら

HTML
1<table class="commonTable">
2    <tbody>
3        <tr>
4            <td class="commonTd activeTd">
5                <p>りんご</p>
6            </td>
7            <td class="commonTd">
8                <p>レモン</p>
9            </td>
10            <td class="commonTd">
11                <p>オレンジ</p>
12            </td>
13        </tr>
14    </tbody>
15</table>

この時、activeTdクラスのテキストは下記jQueryで取得できるのは分かるんです。

jQuery
1$(".commonTable .activeTd").innerText
2//りんごと出力される

しかし、

レモン という子要素が含まれる <td class="commonTd"> に、activeTdクラスを付与したい場合、どんなjQueryを書けばよいのでしょうか？仮にtdタグにvalue="レモン"みたいに属性が付与されていれば簡単にセレクターが書ける気がしますが…

yambejp

2021/12/01 06:02 編集

<td class="commonTd"> レモン </td> みたいなものもヒットしていいのでしょうか？

SNTTNS

2021/12/01 06:02

質問いただきありがとうございます。できればこれはヒットしたくないです。皆質問文のような感じに一行だけタグが入ります

行動規範の内容に同意します

回答2件

ベストアンサー

Lhankor_Mhyさんのを参考に、レモンが一続きであるものを前提とすると

javascript
1<style>
2.activeTd{
3color:red;
4}
5</style>
6<script>
7$(function(){
8  $('.commonTable .commonTd').has($('p:contains(レモン)')).addClass('activeTd');
9});
10</script>
11<table class="commonTable">
12<tbody>
13<tr>
14<td class="commonTd activeTd">
15<p>りんご</p>
16</td>
17<td class="commonTd">
18<p>レモン</p>
19</td>
20<td class="commonTd">
21<span>レ</span><span>モン</span>
22</td>
23<td class="commonTd">
24<p>オレンジ</p>
25</td>
26</tr>
27</tbody>
28</table>

投稿2021/12/01 06:25

編集2021/12/01 06:26

yambejp

総合スコア116835

SNTTNS

2021/12/01 06:38

回答ありがとうございます。 BA振ってしまいましたが、こちらの方が丁寧ですね！勉強になります。お二方ともありがとうございました。

Lhankor_Mhy

2021/12/01 06:57

BAは変更できますので、よろしくお願いいたします。

行動規範の内容に同意します

Select all elements that contain the specified text.

:contains() Selector | jQuery API Documentation

js
1$('.commonTd:contains("レモン")').addClass('activeTd')

投稿2021/12/01 05:48

Lhankor_Mhy

総合スコア36981

SNTTNS

2021/12/01 06:11

回答ありがとうございます。多分これ惜しくて、考え方は理解できましたが、私がこのjQueryをそのままコピペして実行してみると下記エラーが発生します。 VM792:1 Uncaught DOMException: Failed to execute '$' on 'CommandLineAPI': '.commonTd:contains("レモン")' is not a valid selector. at <anonymous>:1:1 お手数ですが、なんとか直せないでしょうか？