3

私はhtmlを持っています:

<div class="items-list-container">
   <div class="fieldset-item">Something</div>
   <div class="fieldset-item">Something 2</div>
   <div class="fieldset-item">Something 3</div>
   <div class="fieldset-item">Something 4</div>
   <div class="fieldset-item">Something 5</div>
</div>

tvariableが text in と等しいかどうかを jQuery で調べる必要があり、そうである場合は、クラス css を にfieldset-item設定します。たとえば、fieldet-itemdisplay: block

t = "Something 2"

html は次のようになります。

   <div style="display: block;" class="items-list-container">
       <div class="fieldset-item">Something</div>
       <div style="display: block;" class="fieldset-item">Something 2</div>
       <div class="fieldset-item">Something 3</div>
       <div class="fieldset-item">Something 4</div>
    </div>

次のコマンドを使用して、div 内のすべてのテキストを見つけることができます。

var text = $(".items-list-container").text();

css を特定の一致する div に追加するにはどうすればよいですか?

4

4 に答える 4

11 
$('.items-list-container .fieldset-item:contains("'+ t +'")').css('display', 'block');

デモ

上記のコードについては、@fudgey コメントを参照してください。

より正確に

$('.items-list-container .fieldset-item').filter(function() {
    return $(this).text().trim() == t;
}).css('display', 'block');

デモ

関連参照:

于 2012-08-06T13:36:02.083 に答える
5

:contains()役に立つかもしれないjQueryセレクターの拡張機能がいくつかあります（元の要点）

/* jQuery selector to match exact text inside an element
 *  http://wowmotty.blogspot.com/2010/05/jquery-selectors-adding-contains-exact.html
 *  :containsExact()     - case insensitive
 *  :containsExactCase() - case sensitive
 *  :containsRegex()     - set by user ( use: $(el).find(':containsRegex("/(red|blue|yellow)/gi")') )
 */
$.extend( $.expr[":"], {
    containsExact: $.expr.createPseudo ?
        $.expr.createPseudo(function(text) {
            return function(elem) {
                return $.trim(elem.innerHTML.toLowerCase()) === text.toLowerCase();
            };
        }) :
        // support: jQuery <1.8
        function(elem, i, match) {
            return $.trim(elem.innerHTML.toLowerCase()) === match[3].toLowerCase();
        },

    containsExactCase: $.expr.createPseudo ?
        $.expr.createPseudo(function(text) {
            return function(elem) {
                return $.trim(elem.innerHTML) === text;
            };
        }) :
        // support: jQuery <1.8
        function(elem, i, match) {
            return $.trim(elem.innerHTML) === match[3];
        },

    containsRegex: $.expr.createPseudo ?
        $.expr.createPseudo(function(text) {
            var reg = /^\/((?:\\\/|[^\/])+)\/([mig]{0,3})$/.exec(text);
            return function(elem) {
                return reg ? RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML)) : false;
            };
        }) :
        // support: jQuery <1.8
        function(elem, i, match) {
            var reg = /^\/((?:\\\/|[^\/])+)\/([mig]{0,3})$/.exec(match[3]);
            return reg ? RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML)) : false;
        }

});

したがって、上記のコードを使用すると、次のように実行できます。

$('div:containsExact("Something 2")').show();

または大文字と小文字を区別する検索には、次を使用します。

$('div:containsExactCase("Something 2")').show();

最後の拡張機能は正規表現を使用します。これは便利ですが、あなたの場合はそうではないかもしれません:)

于 2012-08-06T13:46:45.430 に答える
0

これを試して

$(".fieldset-item:contains('Something 2')", ".items-list-container").css('display', 'block');
于 2012-08-06T13:36:57.453 に答える
0

このような：

に一致する.fieldset-itemものをそれぞれ見つけながらループします。cssを追加します。.text()t

$('.fieldset-item').each(function(i, item){
    if ($(item).text() == t){
        $(item).css('display', 'block');
    }
});

または@helmusが言及したように、t変数を使用します：

$(".fieldset-item:contains('" + t + "')", ".items-list-container")
     .css('display', 'block');
于 2012-08-06T13:35:21.027 に答える