<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>
など、別の要素が入っているとうまく機能しません。