内包する要素の中からさらに探す

jQuery 授業




☆★データーでの確認★☆

find


  • 自要素の子孫が内包する要素すべてのなかから、指定したセレクタにマッチするものを探してくる機能

  • 記述内容
$(function(){
	var student = $('#student');
	var age = student.find('.age');
	var img = student.find('img');
	age.css('background','pink');
	img.css('border','3px solid red');
});

書き替え

  • 記述内容
$(function(){
	var student = $('#student');
	var age = student.find('.age');
	var img = student.find('img');
	age.css('background','pink');
	img.css('border','3px solid red');
});

ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>内包する要素の中からさらに探す</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>
<body>
<div id="student">
<div class="age">22</div>
<div class="photo"><img src="photo.jpg" alt=""></div>
</div>

<script>
$(function(){
	var student = $('#student');
	var age = student.find('.age');
	var img = student.find('img');
	age.css('background','pink');
	img.css('border','3px solid red');
});
</script>

</body>
</html>


ブラウザで表示【 Chrome 】