SQLの窓

2014年07月05日


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

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

そして、3番目のボックスで次のレベルにある 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
posted by lightbox at 2014-07-05 20:53 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり