JavaScript
Googleでログイン
問題3：flexを使わずにボックスの高さを揃えよう
１番高さの大きいliタグの高さを取得して、
他のliタグにも反映させよう
他のliタグにも反映させよう
あらかじめエディタに書くコード
<ul class="list">
<li>これは忍者CODEの問題です。</li>
<li>これは忍者CODEの問題です。
これは忍者CODEの問題です。これは忍者CODEの問題です。
これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。
これは忍者CODEの問題です。</li>
<li>これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。</li>
</ul>
¥HTML¥
*{margin: 0;padding: 0;list-style: none;box-sizing: border-box;}
.list{
width: 1000px;
margin: 300px auto 0 auto;
overflow: hidden;
}
.list li{
width: 300px;
float: left;
padding: 20px;
background-color: pink;
margin-right: 20px;
}
¥CSS¥
期待する画面
解答ソースコード
$(function(){
let max_li = 0;
$('li').each(function(index, el) {
if( max_li < $(el).height() ){
max_li = $(el).height();
}
});
$('li').height(max_li);
});
¥JavaScript¥
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<style>
*{margin: 0;padding: 0;list-style: none;box-sizing: border-box;}
.list{
width: 1000px;
margin: 300px auto 0 auto;
overflow: hidden;
}
.list li{
width: 300px;
float: left;
padding: 20px;
background-color: pink;
margin-right: 20px;
}
</style>
</head>
<body>
<ul class="list">
<li>これは忍者CODEの問題です。</li>
<li>これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。</li>
<li>これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。これは忍者CODEの問題です。</li>
</ul>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</body>
</html>
¥HTML¥
完了にする！
活動記録をTweetする
1.JavaScriptでできること
ループの処理が必要になる。
また、このパターンはカウントする為の変数を使うのが鉄板なので、
それも覚えておこう。