1

jQuery :contains() セレクター

http://api.jquery.com/contains-selector/

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

その要素の子孫のいずれかに一致するテキストを持つ要素を省略するにはどうすればよいですか。選択した要素内に一致するテキストが直接表示される要素のみを取得したい。

以下の例では、"Red" という単語を含むスパンのみに赤色のテキストを表示します。

<span>Green
    <span>Red</span>
</span>
<span>Red</span>

jQuery("span:contains('Red')").css("color","red");

http://jsfiddle.net/UNydR/2/

4

2 に答える 2

3

jQuery には、これを処理するための組み込みの方法が用意されていません。子テキスト ノードをループして、文字列を手動で検索する必要があります。

$('span').each(function () {
    var span = this;
    $.each(span.childNodes, function () {
        if (this.nodeType == 3 && this.nodeValue.indexOf('Red') >= 0 ) {
            $(span).css('color', 'red');
            return false;
        }
    });
});

これがフィドルです：http://jsfiddle.net/TEnX7/

これを頻繁に使用し、常にそれを書き出す必要がない場合は、独自のカスタム フィルター式を作成できます。

jQuery.expr[':']['contains-direct'] = $.expr.createPseudo(function(text) {
    return function (elem) {
        var contains = false;
        $.each(elem.childNodes, function () {
            if (this.nodeType == 3 && this.nodeValue.indexOf(text) >= 0 ) {
                contains = true;
                return false;
            }
        });
        return contains;
    }
});

次に、jQuery のように、コードで直接使用できるようになりますcontains。

$('span:contains-direct(Red)').css('color', 'red');

これがフィドルです：http://jsfiddle.net/F9xZ8/

于 2013-08-22T19:52:45.620 に答える
2

試す：

jQuery("span:contains('Red')").filter(function () {
    return ($(this).text() == 'Red')
}).css("color", "red");

jsFiddle の例

于 2013-08-22T19:49:24.887 に答える