jQueryオブジェクト２３

jQuery 授業



それぞれについて処理する - each



ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja"><head>
<meta charset="UTF-8">
<title>それぞれについて処理する - each</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>

body {
background-color: #FCF;
}

.animal {
width: 300px;
height: 100px;
background-color: #9FC;
}

</style>
</head>
<body>

<div class="animal">cat</div>
<div class="animal">dog</div>
<div class="animal">turtle</div>
<div class="animal">tiger</div>

<script>
$(function() {
$('.animal').each(function() {
var name = $(this).text();
alert(name);
});
});
</script>

</body>
</html>

ブラウザで表示【 Chrome 】

  • それぞれについてのアラートを表示する