jQuery class 取得 1つ

jQueryで複数の条件に合致する要素をclassで取得する方法

この記事では、jQueryを使って複数の条件を持つ要素をclassで取得する方法を紹介します。

単一のクラス名で要素を取得する

$('.className'): 単一のクラス名を持つ要素を取得する基本的な方法 


<div class="example">例1</div>
<script>
$(document).ready(function(){
  $('.example').css('color', 'red'); // クラス名 "example" を持つ要素の文字色を赤に変更
});
</script>

複数のクラス名を持つ要素を取得する

  • $('.className1.className2'): 複数のクラス名をドットで繋ぐことで、全てのクラス名を持つ要素を取得
  • $('.className1, .className2'): カンマで区切ることで、いずれかのクラス名を持つ要素を取得

<div class="example1 example2">例2</div>
<div class="example1">例3</div>
<script>
$(document).ready(function(){
  $('.example1.example2').css('font-weight', 'bold'); // クラス名 "example1" と "example2" を持つ要素の文字を太字に
  $('.example1, .example2').css('text-decoration', 'underline'); // クラス名 "example1" または "example2" を持つ要素に下線を引く
});
</script>

属性セレクタと組み合わせる

$('.className[attributeName="attributeValue"]'): クラス名と属性の両方を指定して要素を取得 


<div class="example" data-id="1">例4</div>
<div class="example" data-id="2">例5</div>
<script>
$(document).ready(function(){
  $('.example[data-id="1"]').css('background-color', 'yellow'); // クラス名 "example" と属性 data-id="1" を持つ要素の背景色を黄色に
});
</script>

複雑な条件で要素を取得する

  • $('div.className:contains("text")'): :contains()セレクタと組み合わせて、特定のテキストを含む要素を取得
  • jQueryの豊富なセレクタを利用して、より複雑な条件で要素を取得

<div class="example">これは例6です</div>
<div class="example">これは例7です</div>
<script>
$(document).ready(function(){
  $('div.example:contains("例6")').css('font-style', 'italic'); // "例6" を含む、クラス名 "example" を持つdiv要素の文字を斜体にする
});
</script>

まとめ

jQueryを使うことで、複数の条件を指定してclass属性を持つ要素を柔軟に取得できます。 この記事で紹介した方法を参考に、効率的なDOM操作を実現しましょう。

参考資料

QA

質問 回答
複数のクラス名を持つ要素から、特定のクラス名のみを持つ要素を除外して取得するにはどうすればよいですか？ :not()セレクタを使用します。例えば、クラス名 "example1" を持ち、かつクラス名 "example2" を持たない要素を取得する場合は、$('.example1:not(.example2)')と記述します。
親要素のクラス名で子要素を取得するにはどうすればよいですか？ 子孫セレクタ(>)を使用します。例えば、クラス名 "parent" を持つ要素の子要素のうち、クラス名 "child" を持つ要素を取得する場合は、$('.parent > .child')と記述します。
JavaScriptのDOM APIとjQueryで要素を取得する方法の違いは何ですか？ JavaScriptのDOM APIでは、document.getElementsByClassName() や document.querySelectorAll() など、要素を取得するための関数が用意されています。一方、jQueryでは、CSSセレクタを使用して要素を取得します。jQueryを使用すると、より簡潔で直感的な記述で要素を取得できます。

その他の参考記事:jquery class 削除