8

私は要素を持っています。特定のクエリ（たとえば、querySelectorと同じ種類のスタイルの（'.someclass'））に一致するかどうかを確認したいと思います。

これは思ったほど簡単ではありません。Element.querySelectorAllおよびElement.querySelectorは、問題の要素の子孫でのみ機能します。要素自体ではありません。

var p = document.querySelector('p')

注：上の行は、説明のみを目的としています。実生活では、私は実際に他の方法で要素を見つけました。

p.querySelector('p')

を返しますnull。querySelectorは子孫でのみ動作するためです。

私はそれをできた：

p.parentNode.querySelector('.someclass')

ただし、これは要素の親の最初の子を返します。これは別の要素である可能性があります。たとえば、「p」が親の2番目の子である場合、このコードは失敗します。

要素自体がクエリに一致するかどうかを確認するにはどうすればよいですか？

4

4 に答える 4

10

メソッドを使用できますmatches()。

サポートはhttp://caniuse.com/matchesselectorにあります。

ただし、これはまだドラフトであるため、すべてのブラウザーがプレフィックスを付けて実装しています。

  • element.msMatchesSelector( selector )(IE)
  • element.mozMatchesSelector( selector )(モジラ)
  • element.webkitMatchesSelector( selector )(ウェブキット)
  • element.oMatchesSelector( selector )（オペラ）
于 2012-11-15T12:07:43.933 に答える
3

MatchesSelectorさらに:主要なブラウザーで使用するヘルパー

function matches() {
  var el = document.querySelector('body');
  return ( el.mozMatchesSelector || el.msMatchesSelector ||
           el.oMatchesSelector   || el.webkitMatchesSelector || 
           {name:'getAttribute'} ).name;
}
//=> usage
var someP = document.querySelector('p');
   ,rightClass = someP[matches()]('.someclass');

それでも、/someclass/.test(someP.className)ここでは短くなります;）

于 2012-11-15T12:48:15.420 に答える
1

すべてのブラウザにあるわけではありませんが、これは役立つ場合があります：http: //caniuse.com/matchesselector

使用例（MDNページから）;

<div id="foo">This is the element!</div>
  <script type="text/javascript">
    var el = document.getElementById("foo");
    if (el.mozMatchesSelector("div")) {//or webkitMatchesSelector("div") in webkit browser or msMatchesSelector("div") in IE9/10
      alert("Match!");
    }
  </script>

他の唯一の方法は、既存のquerySelectorアイテムと同じであるかどうかをテストするすべてのアイテムを実行してループすることであると想定します。

于 2012-11-15T12:01:42.637 に答える
1

通常、 elementeを指定して、使用するセレクターと一致するかどうかを確認するには、次のようにします。

var check = false;
var c = e.parentNode.querySelectorAll('selector');
for(var i = 0; i < c.length; i++){
    if (c[i]==e){
        check = true;
    }
}

より簡潔ですが、ややハックな解決策は次のとおりです。

var c = e.parentNode.querySelectorAll('selector');
var check = Array.prototype.indexOf.call(c,e) != -1;

注:check要素がセレクターに一致するかどうかを示します。

ここにデモがあります：http://jsfiddle.net/2vX3z/

于 2012-11-15T11:54:29.037 に答える