jQueryのchildren()メソッドとは?使い方も解説![例とコードで解説]

jQuery

こんにちは!ソウシ(@gomaio2018)と申します!

今回は、jQueryの要素を取得するメソッドを紹介します。

そのメソッドの名は、「children()メソッド」です。この解説では、例とコードを使って分かりやすく解説していきます。

日本初訴求

jQueryのchildren()メソッドとは?

jQueryのchildren()メソッドは、「指定したセレクタが持つ子要素(一階層だけ下)の中から指定したセレクタに合致した要素を取得」することが出来ます。

この記事の前の記事に「find()メソッド」(詳しくは、「jQueryのchildren()メソッドとは?使い方も解説![例とコードで解説]を参照ください!」)

を紹介したのですが、そのメソッドは全ての子孫要素を取得に対して、こちらは子要素だけとなっています。

つまり、「find()メソッド」の範囲が小さくなったバージョンと思って頂ければ、分かりやすいと思います。

なお、取得したい要素は、children()メソッドの引数に記述する必要性があります。

記述の仕方は、「children(引数)」となります。

jQueryのchildren()メソッドの簡単な特徴。

  • ・要素を取得するメソッド。
  • ・指定したセレクタの子要素が対象。
  • ・children(引数)と記述する

では、実際に次からは、コードを使って解説していきます。

jQueryのchildren()メソッドを例とコードで解説

<!DOCTYPE html>
<html lang=ja>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="stylesheet.css">
	<title></title>
</head>
<body>
<h1 id="title1">肉の種類</h1>
<ul id="meet">
	<li id="beef">牛肉</li>
	<ul>
		<li id="sirloin">サーロイン</li>
		<li id="tongue">タン</li>
	</ul>
	<li id="tikin">鶏肉</li>
	<li id="pork">豚肉</li>
	<li id="ramu">羊肉</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$("#meet").children("li").css("color","red");
});
</script>
</body>
</html>

注目して欲しい場所は、24行目です。

この記述の場合は、「idであるmeetの子要素である、li要素を取得し、文字の色を赤色にする」という命令が下されています。

実際に、文字の色が変わっているのか、下の画像で分かります。

子要素のliタグ要素だけが、赤くなっているのが分かります。

説明したように、孫要素もliタグですが、「children()メソッド」は、子要素だけなので、孫要素は、赤文字になりません

このようにして、「children()メソッド」は、「セレクタで指定した要素の、子要素を取得できる」ことが分かります。

jQueryのchildren()メソッドのまとめ

今回は、「jQueryのchildren()メソッド」について解説しました。

childrenという名前の通りの効果なので、とても覚えやすいメソッドではないでしょうか?

しかし、孫要素は取得できないことは、注意しておく必要があります。

よく使うメソッドなので是非、覚えて行ってくださいね!

日本初訴求

人気記事プログラミングスクールである「TECH::EXPERT」が素晴らしくオススメな理由[あの有名人も絶賛!]