jQueryを使用して、ある種のテキストを正確に含むリンクを選択します。例えば:
<p><a>This One</a></p>
<p><a>"This One?"</a></p>
<p><a>Unlikely</a></p>
私はこれを試しました:
$('a:contains("This One")')
ただし、最初のリンクと2番目のリンクを選択します。ちょうど「これ」を含む最初のリンクが欲しいだけです。どうやってやるの?
回答:
あなたはこれを行うことができます:
$('a').filter(function(index) { return $(this).text() === "This One"; });
リファレンス:http : //api.jquery.com/filter/
return
。私はそれを変更しなければなりませんfunction(index) { return (this.text === 'This One') }
私の同僚は、これを行うための関数を使ってjQueryを拡張しました。
$.expr[':'].textEquals = function(a, i, m) {
return $(a).text().match("^" + m[3] + "$");
};
その結果、次のように正確なテキストで何かを選択できます。
$("label:textEquals('Exact Text to Match')");
毎回正確な構文を覚えておく必要がないので、これは簡単です。彼の投稿全体はこちらです: 正確なテキストで要素を選択するためのjQueryカスタムセレクター:textEquals
FishBasketGordoの答えを拡張します。大量の要素を選択する場合は、:contains()
最初にを使用して絞り込み、次にフィルターを適用します。
これにより、全体的な速度が向上します。
$('a:contains("This One")').filter(function(index)
{
return $(this).text() === "This One";
});
拡張機能を使用していた
$.expr[':'].textEquals
しかし、実装がjQuery 1.7では動作しないことがわかりました(どうやらSizzla.filterの変更)。それを機能させるためにしばらく苦労した後、私は同じことを達成するためのjQueryプラグインを単に作成しました。
$.fn.textEquals = function (text) {
var match = false;
$(this).each(function () {
if ($(this).text().match("^" + escapeRegex(text) + "$")) {
match = true;
return false;
}
});
return match;
};
使用する:
$(".ui-autocomplete li").textEquals('Exact Text to Match');
誰かがこれに遭遇した場合に備えて、共有したかっただけです(、
したがって、ナルニアンの答えはかなりうまくいきます。しかし、実際にそれを使用していると、私はいくつかの問題に遭遇しました。これは、要素のテキストの周囲にランダムな空白が時々あるためです。「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;
}
そして二次注記...トリムは、検索されたテキストの前後の空白のみを削除します。単語の途中にある空白は削除されません。これは望ましい動作だと思いますが、必要に応じて変更できます。
$('a:contains("This One")')[0];
フィルターに対する他の全員の答えに基づいて何かが足りないように感じますが、 'contains'によって返される要素の配列内の最初のアイテムを選択しないのはなぜですか?
これは、最初のリンクが探しているものと完全に一致していることがわかっている場合にのみ機能します。リンクの順序がわからない場合は、他の回答の方が効果的です。
ドロップダウンから選択した値を取得する方法:
$.fn.textEquals = function (text) {
var match = false;
var values="";
$(this).each(function () {
if ($(this).text().match("^" + text + "$")) {
values=$(this).val();
match = true;
return false;
}
});
return values;
};
console.log($("option").textEquals("Option One"));
-ドロップダウンの値を返します
var link = $('a').filter(function(index) { return $(this).text() === "Availability"; });
$(link).hide();
$(link).removeAttr('href');
これが上記の誰かの答えと完全に一致する場合は、
$.fn.equalsText = function (text, isCaseSensitive) {
return $(this).filter(function () {
if (isCaseSensitive) {
return $(this).text() === text
} else {
return $(this).text().toLowerCase() === text.toLowerCase()
}
})
}
Linkedinの検索結果ページコンソールでの出力の一部を次に示します。
$("li").equalsText("Next >", false)
[<li class="next">…</li>] // Output
$("li").equalsText("next >", false)
[<li class="next">…</li>] // Output
$("li").equalsText("Next >", true)
[<li class="next">…</li>] // Output
$("li").equalsText("next >", true)
[] // Output
大文字と小文字の区別もサポートしており、使用していません :contains()
編集(2017年5月22日):-
$.fn.equalsText = function (textOrRegex, isCaseSensitive) {
return $(this).filter(function () {
var val = $(this).text() || this.nodeValue
if (textOrRegex instanceof RegExp) {
return textOrRegex.test(val)
} else if (isCaseSensitive) {
return val === textOrRegex
} else {
return val.toLowerCase() === textOrRegex.toLowerCase()
}
})
}