web-dev-qa-db-ja.com

特定のテキストを持つすべてのアンカータグを選択する方法

複数のアンカータグがある場合：

<a class="myclass" href="...">My Text</a>

クラスに一致する特定のテキストのアンカーを選択するにはどうすればよいですか。例：class： 'myclass'およびtext： 'My Text'を持つすべてのアンカーを選択します

jqueryhtmlcss-selectors
65
Geoff Appleford
$("a.myclass:contains('My Text')")
117
David Morton

完全に一致する:containsのようなカスタムセレクターを作成できます。

$.expr[':'].containsexactly = function(obj, index, meta, stack) 
{  
    return $(obj).text() === meta[3];
}; 

var myAs = $("a.myclass:containsexactly('My Text')");
13
Andy E

アンカーのテキスト含むが特定の文字列である場合にのみ気になる場合は、@ Dave Mortonのソリューションを使用してください。ただし、exactlyを特定の文字列に一致させる場合は、次のようなものをお勧めします。

$.fn.textEquals = function(txt) {
    return $(this).text() == txt;
}

$(document).ready(function() {
    console.log($("a").textEquals("Hello"));
    console.log($("a").textEquals("Hefllo"))
});

<a href="blah">Hello</a>

わずかに改善されたバージョン（2番目のtrimパラメーター付き）：

$.fn.textEquals = function(txt,trim) {
    var text = (trim) ? $.trim($(this).text()) : $(this).text();
    return text == txt;
}

$(document).ready(function() {
    console.log($("a.myclass").textEquals("Hello")); // true
    console.log($("a.anotherClass").textEquals("Foo", true)); // true
    console.log($("a.anotherClass").textEquals("Foo")); // false
});

<a class="myclass" href="blah">Hello</a>
<a class="anotherClass" href="blah">   Foo</a>
4
karim79

まず、「MY text」を含むすべてのタグを選択します。次に、完全一致ごとに、条件に一致する場合は、必要な処理を実行します。

$(document).ready(function () {
    $("a:contains('My Text')").each(function () {
        $store = $(this).text();

        if ($store == 'My Text') {
            //do Anything.....
        }
    });
});
3
Monika

目的のオブジェクトのクラスがわからず、リンクテキストの後に移動したいだけの場合は、

_$(".myClass:contains('My Text')")
_

どの要素なのかわからない場合（a、p、linkなど）も使用できます

_$(":contains('My Text')")
_

（_:_の前の部分を空白のままにします。）

ここで、_<html>_- Tagから始まるすべての要素を目的の要素まで表示することを追加する必要があります。私が提供できる解決策は.last()を追加することですが、これは検索する要素が1つしかない場合にのみ機能します。たぶんsbdy。ここでより良い解決策を知っています。

実際、これは特に@Amalgovinusの質問に対する受け入れられた答えへの追加であるはずです。

0
Muli