【jQuery】子要素の順番を指定して取得する

複数ある子要素を色々な方法で取得してみます。

主に
eq()⇒数字を指定して何番目かを取得
index()⇒何番目かを取得
を使っていきます。

HTMLソース

<div id="outer">
	<span>in1</span>
	<div>in2</div>
	<p>in3</p>
	<div class="childe">in4</div>
	<span class="childe">in5</span>
	<div>in6</div>
	<p>in7</p>
</div>

ｊｓソース

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	//親要素を格納
	var parent_e = $('#outer');
	//children().eq()で何番目かを指定して中身を出力
	console.log($(parent_e).children().eq(0).text()); //⇒「in1」を出力
	console.log($(parent_e).children().eq(6).text()); //⇒「in7」を出力
	
	//index()で何番目かを取得
	console.log($(parent_e).children('span').index()); //⇒「0」を出力
	console.log($(parent_e).children('div').index()); //⇒「1」を出力
	console.log($(parent_e).children('p').index()); //⇒「2」を出力
	console.log($(parent_e).children('.childe').index()); //⇒「3」を出力
	console.log($(parent_e).children().index()); //⇒「0」を出力
	
	//eq()とindex()を組み合わせて内容を出力
	console.log($(parent_e).children().eq($(parent_e).children('span').index()).text()); //⇒「in1」を出力
	console.log($(parent_e).children().eq($(parent_e).children('div').index()).text()); //⇒「in2」を出力
	console.log($(parent_e).children().eq($(parent_e).children('.childe').index()).text()); //⇒「in4」を出力
});
</script>

children()で親要素から子要素を取得します。

子要素は複数ありますのでeq()で何番目かを指定するとその要素を取得できます。

index()にタグ指定もできますが、親要素と子要素が同じ場合-1を返してしまうので注意しましょう。
上記ではchildren()でタグ指定することによって取得できるようにしています。

eqもindexも順番が０からはじまっていることに注意しましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	//親要素を格納
	var parent_e = $('#outer');
	console.log($(parent_e).children('div').index()); //⇒「1」を出力
	console.log($(parent_e).children().index($('div'))); //⇒「-1」を出力
	console.log($(parent_e).children('p').index()); //⇒「2」を出力
	console.log($(parent_e).children().index($('p'))); //⇒「2」を出力
});
</script>

また、index()は最初に出現したものを返しますので該当するものが複数ある場合は他の方法が必要になります。