10

タグ名で始まるノードを選択するにはどうすればよいですか"x-"。階層 DOM ツリーの例を次に示します。

<div>
  <x-tab>
    <div></div>
    <div>
      <x-map></x-map>
    </div>
  </x-tab>
</div>
<x-footer></x-footer>

jQuery ではクエリを実行できません$('x-*')。これを達成する方法はありますか?

4

9 に答える 9

7

以下は正常に動作しています。正規表現を使用しているため、パフォーマンスについてはわかりませんが。

$('body *').filter(function(){
    return /^x-/i.test(this.nodeName);
}).each(function(){
    console.log(this.nodeName);
});

働くフィドル

PS: 上記のサンプルでは、body​​タグを親要素と見なしています。

更新：

Mohamed Meligy の投稿を確認したところ、この条件では文字列操作よりも正規表現の方が速いようです。を使用すると、より高速 (または同じ) になる可能性がありますfind。このようなもの：

$('body').find('*').filter(function(){
    return /^x-/i.test(this.nodeName);
}).each(function(){
    console.log(this.nodeName);
});

jsperf テスト

更新 2:

ドキュメント内を検索する場合は、以下の方法が最速です。

$(Array.prototype.slice.call(document.all)).filter(function () {
    return /^x-/i.test(this.nodeName);
}).each(function(){
    console.log(this.nodeName);
});

jsperf テスト

于 2013-06-17T05:49:51.470 に答える
6

これを行うネイティブな方法はありません。パフォーマンスが最悪なので、自分で行ってください。

例：

var results = $("div").find("*").filter(function(){
    return /^x\-/i.test(this.nodeName);
});

完全な例:

http://jsfiddle.net/6b8YY/3/

注: (更新、コメントを参照)

タグ名をチェックするためになぜこの方法を使用するのか疑問に思っている場合は、次を参照してください:
JavaScript: 大文字と小文字を区別しない検索
とコメントも参照してください。

また、セレクターに追加するのではなく、その方法が気になる場合はfind、セレクターは左からではなく右から一致するため、セレクターを分離した方がよい場合があります。私はこれを行うこともできます:
$("*", $("div")). ただしdiv、親の一致が迅速になるように、IDまたは何かを追加するだけではなく、できれば.

コメントで、それが速くないという証拠を見つけることができます。これは非常に単純なドキュメントに当てはまりますが、jQuery オブジェクトを作成するコストは、すべての DOM 要素を検索するコストよりも高くなります。ただし、実際のページ サイズでは、これは当てはまりません。

アップデート：

Teifiの答えもとても気に入っています。1 か所で実行して、どこでも再利用できます。たとえば、私のやり方と彼のやり方を混ぜ合わせてみましょう。

// In some shared libraries location:
$.extend($.expr[':'], {
    x : function(e) {
            return /^x\-/i.test(this.nodeName);
    }
});

// Then you can use it like:
$(function(){
    // One way
    var results = $("div").find(":x");

    // But even nicer, you can mix with other selectors
    //    Say you want to get <a> tags directly inside x-* tags inside <section>
    var anchors = $("section :x > a");

    // Another example to show the power, say using a class name with it:
    var highlightedResults = $(":x.highlight");
    // Note I made the CSS class right most to be matched first for speed
});

同じパフォーマンス ヒットですが、より便利な API です。

于 2013-06-17T05:59:25.473 に答える
3

効率的ではないかもしれませんが、答えが得られない場合の最後のオプションと考えてください。
これらのタグにカスタム属性を追加してみてください。つまり、たとえばタグを追加するときです。<x-tag>、それにカスタム属性を追加し、タグと同じ値を割り当てると、html は のようになり<x-tag CustAttr="x-tag">ます。
で始まるタグを取得x-するには、次の jQuery コードを使用できます。

$("[CustAttr^=x-]")

で始まるすべてのタグを取得しますx-

于 2013-06-17T05:25:13.870 に答える
3

カスタム jquery セレクター

jQuery(function($) {
    $.extend($.expr[':'], {
        X : function(e) {
            return /^x-/i.test(e.tagName);
        }
    });
});

$(":X")またはを使用$("*:X")してノードを選択します。

于 2013-06-17T06:35:32.797 に答える
2

これは質問に直接答えるものではありませんが、解決策を提供する可能性があります。セレクターでタグを「定義」することで、そのタイプのすべてを取得できますか?

$('x-tab, x-map, x-footer')
于 2013-06-17T05:42:57.377 に答える
0

これが機能するかどうかを確認してください！

function getXNodes() {
  var regex = /x-/, i = 0, totalnodes = [];
  while (i !== document.all.length) {
    if (regex.test(document.all[i].nodeName)) {
      totalnodes.push(document.all[i]);
    }
    i++;
  }
  return totalnodes;
}
于 2013-06-17T05:30:51.520 に答える
0

デモフィドル

var i=0;
for(i=0; i< document.all.length; i++){
    if(document.all[i].nodeName.toLowerCase().indexOf('x-') !== -1){
        $(document.all[i].nodeName.toLowerCase()).addClass('test');
    }
}
于 2013-06-17T05:57:33.763 に答える
-4

これを試して

var test = $('[x-]');
if(test)
    alert('eureka!');

基本的に、jQuery セレクターは CSS セレクターのように機能します。 ここでjQueryセレクターAPIを読んでください。

于 2013-06-17T05:20:39.540 に答える