アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js
を試した様子と結果です.

jQueryで子孫要素(下の全ての階層)を絞る - find

イメージ

公開:2015-02-22

更新:

jQueryのfindメソッドで要素を絞り込む様子です。以下で構成した基本構造のどの親・子・兄弟要素が選択されたか、ボタンのOn/Offで一目でわかります。

  • boxA 赤
  • boxB 青
  • boxC 緑
  • boxD 紫

[実行する]ボタンを押すと適合した要素のborder濃い赤になります。

boxAの中からfindで絞る

$('.boxA').find('div')を

boxAの文

boxBの文

boxCの文

boxDの文

  • リストD1
  • リストD2
  • リストA1
  • リストA2
$('.boxA').find('p')を

boxAの文

boxBの文

boxCの文

boxDの文

  • リストD1
  • リストD2
  • リストA1
  • リストA2
$('.boxA').find('ul')を

boxAの文

boxBの文

boxCの文

boxDの文

  • リストD1
  • リストD2
  • リストA1
  • リストA2
$('.boxA').find('li')を

boxAの文

boxBの文

boxCの文

boxDの文

  • リストD1
  • リストD2
  • リストA1
  • リストA2

divpなど引数で指定した要素を階層構造の下まで探して選ばれました。セレクタそのもの(この場合はboxA)は含まれませんでした。

おおまかなコードとfindのまとめ

上をかなり大雑把に書くと以下のようになります。

<input type="button" value="実行する">
<div class="boxA">
<div class="boxB">
		・・・
</div>
</div>
.boxB	{
  border-width: 5px;
  border-style: solid;
  border-color: #9cf; /* 水色 */
}

.selected {
  border-color: red;
}
	$('input').click(function(){
		$('.boxA').find('div').toggleClass('selected');
});

(見やすくするためにCSSは上記以外に多少の装飾をしています。また、HTML/CSS/jQueryで実際はこのページ用に複雑な処理をしています。)

CSSでborderを赤くするクラスを用意し、jQueryは
1行目:ボタンをクリックすると、
2行目:boxAの中から. divを探し. 探し出された要素のクラスを切り替える。
という処理です。

divpなどに替えればそれらが選ばれます。

findメソッドで子孫要素(下の全ての階層)を絞る(探す)ことができました。