【Java script問題集】1-12 「1-11.」で取得したli要素の値を逆順でhtml表示してみよう
1-12.html
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<title>1-12</title>
<body>
<div id="shiritori">
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
<li>ぱいぷ</li>
<li>ぷりん</li>
</div>
<button id="btn">切り替え</button>
</body>
</html>
1-12.js
$(function(){
$("#btn").click(function(){
$("#shiritori").html($("#shiritori li").get().reverse());
});
});
実行結果(ボタン押下前)
実行結果(ボタン押下後)