web-dev-qa-db-ja.com

jQueryはクラス属性を持たないすべてのdivを取得します

クラス属性を持つすべてのdivを取得します

$('div[class]')

クラス属性を持たないすべてのdivを取得します

$('div[class!=""]')

このコードは機能しますが、なぜ機能するのかわかりません。上記のコードが機能する場合、クラス属性を持つすべてのdivのコードは

$('div[class=""]')

結果は得られません。

jqueryjquery-selectors
69
Roger

:not()擬似クラスセレクター で試してください：

_$('div:not([class])')
_

編集

jQueryセレクター の説明：

  • _[attribute]_
    指定された属性を持つ要素を照合します。
  • _[attribute=value]_
    特定の値を持つ指定された属性を持つ要素を照合します。
  • _[attribute!=value]_
    指定された属性を持たない、または指定された属性を持っているが特定の値を持たない要素と一致します。

つまり、_div[class=""]_は、空の値で指定されたclass属性を持つすべてのDIV要素を選択します。

しかし、最後のセレクタはjQueryの独自のセレクタであり、 CSSセレクタ ではありません。クラスを持たないすべてのDIV要素を選択するには、:not()を使用する必要があります。

_div:not([class])
_
137
Gumbo

理解することが重要なのは、emptyクラス属性と要素withoutクラス属性ですが、選択するには異なるテストが必要です。

すべてが異なることを行う多くのテストがあります。テスト用のHTMLは次のとおりです。

<div class="">Empty Class Attribute </div>
<div class="column">Full Class Attribute </div>
<div>No Class Attribute </div>

さて、テストを実行してみましょう（最初の部分は、単にアラートで呼び出されたものを知るのに役立つ文字列であり、そうでなければ意味がありません）：

$(document).ready(function(e){
  // Outputs "Empty Class Attribute Full Class Attribute"
  alert( "div[class] : "     + $('div[class]').text()     );

  // Outputs "Full Class Attribute"
  alert( "div[class!=''] : " + $('div[class!=""]').text() );

  // Outputs "Empty Class Attribute" 
  alert( "div[class=''] : "  + $('div[class=""]').text()  );

  // Outputs "No class Attribute"
  alert( "div:not([class]) : " + $('div:not([class])').text()     );
});

ブラウザにこのコードを表示するには、こちらにアクセスしてください： http://jsbin.com/ijup

ここで、この知識を活用して、ページ上のすべてのdiv要素を選択し、属性が空で属性がない場合は、次のセレクターを使用します。

$("div[class=''], div:not([class])");
21
Doug Neiner

$('div[class=""]')セレクターは、基本的に次のように読み取ります。 "クラス属性の値として空の文字列を持つすべてのdiv要素を取得します。"-除外空の文字列以外のクラス属性にANY値を持つすべてのdiv要素、およびクラス属性がまったく設定されていないすべてのdiv要素。

4
Atli