147

:contains jQuery セレクターの大文字と小文字を区別しないバージョンはありますか?それとも、すべての要素をループし、それらの .text() を自分の文字列と比較して、手動で作業を行う必要がありますか?

4

12 に答える 12

128

私がjQuery 1.2でやったことは次のとおりです。

jQuery.extend(
    jQuery.expr[':'], { 
        Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0" 
});

これにより、大文字と小文字を区別しない :Contains セレクターを持つように jquery が拡張されます。:contains セレクターは変更されません。

編集：jQuery 1.3（@ user95227に感謝）以降では必要です

jQuery.expr[':'].Contains = function(a,i,m){
     return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

編集：明らかにDOMに直接アクセスする

(a.textContent || a.innerText || "")

それ以外の

jQuery(a).text()

前の式ではかなり高速化されるため、速度が問題になる場合は自己責任で試してください。( @Johnの質問を参照)

最新の編集: jQuery 1.8 の場合:

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});
于 2008-10-09T14:37:24.293 に答える
107

オプションで大文字と小文字を区別しないようにするには: http://bugs.jquery.com/ticket/278

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

次に、:containsi代わりに使用します:contains

于 2011-02-08T17:11:46.117 に答える
41

jQuery 1.3 以降、このメソッドは廃止されました。これを機能させるには、関数として定義する必要があります。

jQuery.expr[':'].Contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
于 2009-04-23T22:49:50.747 に答える
39

誰か (私のような) が興味を持っている場合、aとm[3]は定義を含むで何を意味しますか。

KEY/LEGEND: セレクター定義で使用するために jQuery によって使用可能になったパラメーター:

r = 精査される要素の jQuery 配列。(例: r.length = 要素数)

i = 配列r内で現在精査中の要素のインデックス。

a = 現在精査中の要素。Selector ステートメントは、一致した結果に含めるために true を返す必要があります。

m[2] = nodeName または * (コロンの左側) を探します。

m[3] = :selector(param) に渡されるパラメーター。通常、 :nth-of-type(5) のようなインデックス番号、または:color(blue)のような文字列です。

于 2008-10-10T05:06:30.857 に答える
32

jQuery 1.8では、使用する必要があります

jQuery.expr[":"].icontains = jQuery.expr.createPseudo(function (arg) {                                                                                                                                                                
    return function (elem) {                                                            
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;        
    };                                                                                  
});
于 2012-08-24T16:40:39.990 に答える
15

少し高速に実行され、正規表現も使用できるバリエーションは次のとおりです。

jQuery.extend (
    jQuery.expr[':'].containsCI = function (a, i, m) {
        //-- faster than jQuery(a).text()
        var sText   = (a.textContent || a.innerText || "");     
        var zRegExp = new RegExp (m[3], 'i');
        return zRegExp.test (sText);
    }
);


これは大文字と小文字を区別しないだけでなく、次のような強力な検索を可能にします。

  • $("p:containsCI('\\bup\\b')") (「Up」または「up」に一致しますが、「upper」、「wakeup」などには一致しません)
  • $("p:containsCI('(?:Red|Blue) state')") (「赤い状態」または「青い状態」に一致しますが、「アップ状態」などには一致しません)
  • $("p:containsCI('^\\s*Stocks?')") (「stock」または「stocks」に一致しますが、段落の先頭にのみ一致します (先頭の空白は無視されます)。)
于 2012-07-04T09:26:18.683 に答える
6 
jQuery.expr[':'].contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

更新コードは 1.3 でうまく機能しますが、前の例とは異なり、最初の文字の "contains" は小文字にする必要があります。

于 2009-06-15T01:20:02.060 に答える
4

":contains" を使用して、HTML コードから大文字と小文字の区別を無視してテキストを検索するには、以下を参照してください。

 $.expr[":"].contains = $.expr.createPseudo(function(arg) {
            return function( elem ) {
                return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
            };
        });
        $("#searchTextBox").keypress(function() {
          if($("#searchTextBox").val().length > 0){
            $(".rows").css("display","none");
            var userSerarchField = $("#searchTextBox").val();
            $(".rows:contains('"+ userSerarchField +"')").css("display","block");
          } else {
            $(".rows").css("display","block");
          }              
        });

このリンクを使用して、jquery バージョンに基づいて大文字と小文字を無視するコードを見つけることもできます。 Make jQuery :contains Case-Insensitive

于 2016-01-11T11:06:28.473 に答える
0

以下が機能しないという同様の問題がありました...

// This doesn't catch flac or Flac
$('div.story span.Quality:not(:contains("FLAC"))').css("background-color", 'yellow');

これは機能し、拡張機能は必要ありません

$('div.story span.Quality:not([data*="flac"])').css("background-color", 'yellow');

これも機能しますが、おそらく「手動ループ」のカテゴリに分類されます....

$('div.story span.Quality').contents().filter(function()
{
  return !/flac/i.test(this.nodeValue);
}).parent().css("background-color", 'yellow');
于 2016-04-03T22:56:36.573 に答える