jquery - コンテンツの完全一致によって要素を選択する

Question

よし、入力した文字列だけ:contains()で要素を選択するjQueryのセレクターを作る方法はないだろうか

例えば ​​-

<p>hello</p>
<p>hello world</p>

$('p:contains("hello")').css('font-weight', 'bold');

セレクターは両方のp要素を選択して太字にしますが、最初の要素だけを選択したいです。

Answer 1

いいえ、それを行うjQuery（またはCSS）セレクターはありません。

あなたはすぐに使うことができますfilter：

$("p").filter(function() {
    return $(this).text() === "hello";
}).css("font-weight", "bold");

それはセレクターではありませんが、それは仕事をします。:-)

「こんにちは」の前後の空白を処理したい場合は$.trim、そこに空白を入れることができます。

return $.trim($(this).text()) === "hello";

そこにある時期尚早のオプティマイザーの場合、それが一致していないことを気にしない場合は、直接使用して、<p><span>hello</span></p>への呼び出しを回避できます。$textinnerHTML

return this.innerHTML === "hello";

...しかし、それが問題になるには多くの段落が必要になるので、おそらく最初に他の問題が発生するでしょう。:-)

Answer 2

これを実現するには、jQueryのfilter（）関数を使用できます。

$("p").filter(function() {
// Matches exact string   
return $(this).text() === "Hello World";
}).css("font-weight", "bold");

Answer 3

したがって、Amanduの答えはほとんど機能します。しかし、実際に使ってみると、見つかると思っていたものが見つからないという問題に遭遇しました。これは、要素のテキストの周りにランダムな空白がある場合があるためです。「Hello World」を検索している場合でも、「Hello World」または「Hello World \n」と一致させたいと思うでしょう。したがって、周囲の空白を削除する「trim()」メソッドを関数に追加しただけで、うまく機能し始めました。

具体的には...

$.expr[':'].textEquals = function(el, i, m) {
    var searchText = m[3];
    var match = $(el).text().trim().match("^" + searchText + "$")
    return match && match.length > 0;
}

また、この回答は Select link by text (exact match)と非常によく似ていることに注意してください。

二次的な注意...検索されたテキストの前後trimの空白のみを削除します。単語の途中の空白は削除されません。これは望ましい動作だと思いますが、必要に応じて変更できます。

Answer 4

上で述べた TJ Crowder のように、フィルター機能は驚異的です。私の特定のケースではうまくいきませんでした。div (この場合は jQuery ダイアログ) 内の複数のテーブルとそれぞれの td タグを検索する必要がありました。

$("#MyJqueryDialog table tr td").filter(function () {
    // The following implies that there is some text inside the td tag.
    if ($.trim($(this).text()) == "Hello World!") {
       // Perform specific task.
    }
});

これが誰かの役に立てば幸いです！

Answer 5

.first（）はここで役立ちます

$('p:contains("hello")').first().css('font-weight', 'bold');