1
<table>
<tr><td>AAA</td></tr>
<tr><td>BBB</td></tr>
</table>

というHTMLがあったとして、

jQueryで

$("*:contains('AAA')").addClass('hoge');

とした場合、先祖要素含めて「AAA」のテキストを内包する要素全てにクラスが付与され

<table class="hoge">
<tr class="hoge"><td class="hoge">AAA</td></tr>
<tr><td>BBB</td></tr>
</table>

となってしまいます。(仕様通りの挙動)

恐らく素のJavascriptの処理的には

const elements = document.querySelectorAll('*');
const filterElements = Array.from(elements).filter((element)=> element.textContent.indexOf('AAA') !== -1);
for(el of filterElements){
    el.classList.add('hoge');
}

と同じような感じなのかなと思うのですが、
これを直近の要素だけ選択させることは可能でしょうか。

以下のようになっていてほしい:

<table>
<tr><td class="hoge">AAA</td></tr>
<tr><td>BBB</td></tr>
</table>

解決策の一つとして

$("*:contains('AAA'):not(:has(>*))").addClass('hoge');

でも近いことはできたのですが、
この場合、

<table>
<tr><td><br>AAA</td></tr>
<tr><td>BBB</td></tr>
</table>

など、別の要素が入っているとうまく機能しません。

1 件の回答 1

2

:contains()の説明には

The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof.

とあるように、子孫すべてのtext nodeを対象に検索されるという点は仕様として受け入れざるを得ないかと。質問文でも検討されていますが、何等か別の条件付けをする他ありません。

簡単に思い付く方法として例えば<TD>タグに限定するのであれば

$("td:contains('AAA')").addClass('hoge');

とすれば、<TABLE><TR>にはマッチすることはなくなります。

その他、例えば、子ノードを調査して否定するとか。(コードは試していません。)

$(":contains('AAA'):not(:has(> :contains('AAA')))").addClass('hoge');

ただし、

<div>
  AAA
  <p>AAA</p>
</div>

の場合に、外側の<DIV>まで否定されてしまう副作用があります。

1
  • やはりそうですか。 ただし、 $(":contains('AAA'):not(:has(> :contains('AAA')))").addClass('hoge'); ではうまく動作はしない(先祖要素までクラスが付与されてしまう)ようでしたので念のためお知らせしておきますね。 2022年12月20日 0:48

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。