jQuery：テキストで要素を検索する

idやクラスではなく、その内容に基づいて要素を見つけることが可能かどうか誰かに教えてもらえますか？

異なるクラスやIDを持たない要素を見つけようとしています。（次に、その要素の親を見つける必要があります。）

:containsセレクターを使用して、コンテンツに基づいて要素を取得できます。

デモはこちら

$('div:contains("test")').css('background-color', 'red');

<div>This is a test</div>
<div>Another Div</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQueryドキュメントではそれは言う：

一致するテキストは、選択した要素内、その要素の子孫のいずれか、または組み合わせで直接表示できます

したがって、:contains() selectorを使用するだけでは十分ではなく、検索するテキストが、対象とする要素の直接のコンテンツであるかどうかを確認する必要もあります。

function findElementByText(text) {
    var jSpot = $("b:contains(" + text + ")")
                .filter(function() { return $(this).children().length === 0;})
                .parent();  // because you asked the parent of that element

    return jSpot;
}

Fellas、私はこれが古いことを知っていますが、私はこのソリューションを持っています。何よりもまず、jquery：contains（）に同梱されている大文字と小文字の区別を克服します。

var text = "text";

var search = $( "ul li label" ).filter( function ()
{
    return $( this ).text().toLowerCase().indexOf( text.toLowerCase() ) >= 0;
}).first(); // Returns the first element that matches the text. You can return the last one with .last()

近い将来に誰かがそれが役に立てば幸いです。

ロケットの答えは機能しません。

<div>hhhhhh
<div>This is a test</div>
<div>Another Div</div>
</div>

ここで彼のデモを変更しただけで、ルートDOMが選択されていることがわかります。

$('div:contains("test"):last').css('background-color', 'red');

これを修正するには、コードに「：last」セレクターを追加します。

私の意見では最良の方法です。

$.fn.findByContentText = function (text) {
    return $(this).contents().filter(function () {
        return $(this).text().trim() == text.trim();
    });
};

はい、jQuery containsセレクターを使用します。

次のjQueryは、テキストが含まれているがDOMツリーのリーフノードである子がないdivノードを選択します。

$('div:contains("test"):not(:has(*))').css('background-color', 'red');

<div>div1
<div>This is a test, nested in div1</div>
<div>Nested in div1<div>
</div>
<div>div2 test
<div>This is another test, nested in div2</div>
<div>Nested in div2</div>
</div>
<div>
div3
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>