シャッフルした画像が縦並びになってしまう

前提・実現したいこと

シャッフルして配列をランダムにしたいです。

発生している問題・エラーメッセージ

横並びだったのが、縦並びになってしまいます。何か少しでも分かる事があればよろしくお願いいたします。

該当のソースコード

jQuery
1$(document).ready(function(){
2  $(".shuffle").click(function () {
3    var arr = [];
4$('ul li').each(function() {
5  arr.push($(this).html());
6});
7arr.sort(function() {
8  return Math.random() - Math.random();
9});
10$('ul').empty();
11for(i=0; i < arr.length; i++) {
12  $('ul').append('<li>' + arr[i] + '</li>');
13};
14});
15
16   $(".b1").click(function(){
17     $(".b1").attr("src","http://userdisk.webry.biglobe.ne.jp/007/279/31/N000/000/000/panda(3).jpg");
18   });
19});
20
21html
22<!DOCTYPE html>
23<html>
24<head>
25<meta charset="UTF-8">
26<title>毎日ホームページ</title>
27<link rel="stylesheet" href="styles.css">
28<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
29</head>
30
31<body>
32  <span class="clear">
33<header>
34  <div>
35   <p>day9 Suffle</p>
36  </div>
37</header>
38<div class="main">
39  <div class="container">
40    <p class="shuffle">ここをクリックしてシャッフルしてください！</p><br>
41    <ul>
42    <li class="card">
43    <img class="back b1" src="https://previews.123rf.com/images/bobyramone/bobyramone1401/bobyramone140100001/24827364-playing-card-back-side-Stock-Photo.jpg">
44  </li>
45    <li class="card">
46    <img src="https://previews.123rf.com/images/bobyramone/bobyramone1401/bobyramone140100001/24827364-playing-card-back-side-Stock-Photo.jpg" class="back b2">
47  </li>
48    <li class="card">
49    <img src="https://previews.123rf.com/images/bobyramone/bobyramone1401/bobyramone140100001/24827364-playing-card-back-side-Stock-Photo.jpg" class="back b3">
50  </li>
51    <li class="card">
52    <img src="https://previews.123rf.com/images/bobyramone/bobyramone1401/bobyramone140100001/24827364-playing-card-back-side-Stock-Photo.jpg" class="back b4">
53  </li>
54    <li class="card">
55    <img src="https://previews.123rf.com/images/bobyramone/bobyramone1401/bobyramone140100001/24827364-playing-card-back-side-Stock-Photo.jpg" class="back b5">
56  </li>
57    <li class="card">
58    <img src="https://previews.123rf.com/images/bobyramone/bobyramone1401/bobyramone140100001/24827364-playing-card-back-side-Stock-Photo.jpg" class="back b6">
59  </li>
60    <li class="card">
61    <img src="https://previews.123rf.com/images/bobyramone/bobyramone1401/bobyramone140100001/24827364-playing-card-back-side-Stock-Photo.jpg" class="back b7">
62  </li>
63    <li class="card">
64    <img src="https://previews.123rf.com/images/bobyramone/bobyramone1401/bobyramone140100001/24827364-playing-card-back-side-Stock-Photo.jpg" class="back b8">
65  </li>
66</ul>
67  </div>
68</div>
69<footer>
70  <h4>2018- 毎日ホームページ</h4>
71  <p>作成者</p>
72</footer>
73
74</span>
75<script src="script.js">
76</script>
77</body>
78</html>
79
80css
81body {
82  margin:0px;
83  font-family: "Hiragino Kaku Gothic ProN";
84  user-select: none;
85}
86.clear{
87  float:clear;
88}
89header{
90  height:80px;
91  width: 100%;
92  background-color:rgb(117, 195, 234);
93  font-size:40px;
94  text-align: center;
95}
96header p{
97  line-height: 80px;
98}
99.container{
100  width:75%;
101  height:800px;
102  margin:0 auto;
103  font-size: 32px;
104}
105.container p{
106  font-size:32px;
107  font-weight:bold;
108}
109
110.card{
111  width:20%;
112  height:350px;
113  display: inline-block;
114  margin:0 auto;
115}
116img{
117  width:170px;
118  height:300px;
119  float:center;
120}
121footer{
122  margin:0;
123  background-color:rgb(117, 195, 234);
124  color:white;
125}
126ul{
127  list-style: none;
128}
129

試したこと

cssでfloatやtext-alignを使ってみた

補足情報（FW/ツールのバージョンなど）

トランプの画像がシャッフルされるようにしたいが、クリックしてシャッフルすると配置がおかしくなってしまう。

kei344

2018/03/09 14:32

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$('ul').append('<li>' + arr[i] + '</li>');

を、既存のHTMLの形式に合わせて

javascript
1$('ul').append('<li class="card">' + arr[i] + '</li>');

としないといけないですね。

あと、.cardのCSSについて少し触れておきます。
width: 20%;でinline-blockで組んでるので、最初は1列に4枚表示されてますが、
（改行の分、余分な空白ができるため）
jQueryでシャッフル後は改行無くなっちゃうので、5列になっちゃいます。

4枚をキープしたいなら、</li>の直後にスペースを入れておくか、

javascript
1$('ul').append('<li class="card">' + arr[i] + '</li> ');

5枚にしたい場合は、floatで組んでおいた方がいいと思います。

投稿2018/03/09 16:02

kszk311

総合スコア3404

khiro912

2018/03/13 00:21

ご回答ありがとうございます！！ CSSについてもコメントしていただき、とてもありがたいです。初めて質問したので、質問内容にわかりにくい点があったかもしれませんが、アンサーを頂けて助かりました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！