jQuery の .children で、直近の子要素のみを選択して処理する

一般的には、セレクタを使って、ある特定の要素の中の全ての特定要素を取得できますが、要素内の次のレベルのみ取得したい場合は、.childlen を使用して、引数にセレクタを渡します。以下の例では、一番上のボックスがなにもしない状態で、２番目のボックスで jQuery の最初のセレクタで level-2 内の全ての li 要素を取得しています。

そして、３番目のボックスで次のレベルにある li 要素だけを取り出しています。

※ 最初の検索は、$( "#levelTarget1 .level-2" ).find("li") でも可能です

• I
• II
• A
• 1
• 2
• 3
1. 1
2. 2
3. 3
• B
• III

• I
• II
• A
• 1
• 2
• 3
1. 1
2. 2
3. 3
• B
• III

• I
• II
• A
• 1
• 2
• 3
1. 1
2. 2
3. 3
• B
• III

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

$( "#levelTarget1 .level-2 li" )
	.css( {
		"background-color": "pink",
		"width": "300px",
		"padding": "10px",
		"border": "1px solid #123456",
		"border-radius": "5px"
	});

$( "#levelTarget2 .level-2" )
	.children("li")
	.css( {
		"background-color": "pink",
		"width": "300px",
		"padding": "10px",
		"border": "1px solid #123456",
		"border-radius": "5px"
	});

});
</script>
<style>
.level-1 {
	width:450px;
	border: 1px solid #c0c0c0;
	padding: 10px 0 10px 30px;
	border-radius: 10px;
	box-shadow: 0 15px 30px -15px;
}
</style>
<ul class="level-1">
	<li>I</li>
	<li>II</li>
	<ul class="level-2">
		<li style="background-color:#fff">A</li>
		<ul class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ul>
		<ol class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ol>
		<li style="background-color:#fff">B</li>
	</ul>
	<li>III</li>
</ul>
<ul id="levelTarget1" class="level-1">
	<li>I</li>
	<li>II</li>
	<ul class="level-2">
		<li style="background-color:#fff">A</li>
		<ul class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ul>
		<ol class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ol>
		<li style="background-color:#fff">B</li>
	</ul>
	<li>III</li>
</ul>
<ul id="levelTarget2" class="level-1">
	<li>I</li>
	<li>II</li>
	<ul class="level-2">
		<li style="background-color:#fff">A</li>
		<ul class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ul>
		<ol class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ol>
		<li style="background-color:#fff">B</li>
	</ul>
	<li>III</li>
</ul>

メソッド:jQuery

jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する

jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル

jQuery の .contents と .children の違い

jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う

jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")

jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます

JavaScript と jQuery : 位置関係から id の無い要素の参照を取得

JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する

jQuery の .val() と .val('値') と一括変更用の .val(関数)

$.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする

jQuery のイベント名によるイベント登録の中身

jQuery の each メソッドの『秘密の使い方』

jQuery の .text('値') と .html() で HTMLエンティティに変換

jQuery : animation メソッド