【jQuery】レスポンシブに対応した「もっと見る」を作りたい

記事をデフォルトでは9件・3列で表示し、「もっと見る」ボタンを押すと、
同じ形式で他の記事が表示されるようにしたいと考えています。
画面幅が狭くなった時は2列で表示したいのですが、
現状では記事の数が3の倍数のため、10番目の記事が表示されず空きができてしまいます。
これを解決する方法を探しています。
よろしくお願いいたします ><

現状のサンプル：https://jsfiddle.net/shiosu/o3ysLvt1/

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>もっと見る</title>
6  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
7</head>
8
9<body>
10<div class="content">
11  <div class="post-wrap">
12    <article class="post">
13      <p>記事：01</p>
14    </article>
15
16    <article class="post">
17      <p>記事：02</p>
18    </article>
19
20    <article class="post">
21      <p>記事：03</p>
22    </article>
23
24    <article class="post">
25      <p>記事：04</p>
26    </article>
27
28    <article class="post">
29      <p>記事：05</p>
30    </article>
31
32    <article class="post">
33      <p>記事：06</p>
34    </article>
35
36    <article class="post">
37      <p>記事：07</p>
38    </article>
39
40    <article class="post">
41      <p>記事：08</p>
42    </article>
43
44    <article class="post">
45      <p>記事：09</p>
46    </article>
47  </div><!-- / .post-wrap -->
48</div><!-- / .content -->
49<div class="more">もっと見る</div>
50
51<div class="content">
52  <div class="post-wrap">
53    <article class="post">
54      <p>記事：10</p>
55    </article>
56
57    <article class="post">
58      <p>記事：11</p>
59    </article>
60
61    <article class="post">
62      <p>記事：12</p>
63    </article>
64  </div><!-- / .post-wrap -->
65</div><!-- / .content -->
66</body>
67</html>

css
1@charset "UTF-8";
2
3.content {
4  margin-bottom: 10px;
5}
6
7.post-wrap {
8  display: flex;
9  justify-content: space-between;
10  flex-wrap: wrap;
11  width: 80%;
12  margin: 0 auto;
13  background: yellow;
14}
15
16.post {
17  width: 30%;
18  height: 150px;
19  margin-bottom: 20px;
20  background: #DDD;
21}
22
23.more {
24  width: 200px;
25  padding: 5px;
26  color: #fff;
27  text-align: center;
28  margin: 0 auto;
29  cursor: pointer;
30  background: green;
31}
32
33@media (max-width: 500px) {
34  .post-wrap {
35    background: pink;
36  }
37  .post {
38    width: 45%;
39  }
40}

js
1$(function(){
2  $('.content:not(.content:first-of-type)').css('display','none');//一番上の要素以外を非表示
3  $('.more').nextAll('.more').css('display','none');//ボタンを非表示
4  $('.more').on('click', function() {
5    $(this).css('display','none');//押したボタンを非表示
6    $(this).next('.content').fadeIn();
7    $(this).nextAll('.more:first').css('display','block'); //次のボタンを表示
8  });
9});

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

回答2件

ベストアンサー

記事をデフォルトでは9件・3列で表示し、「もっと見る」ボタンを押すと、
同じ形式で他の記事が表示されるようにしたいと考えています。

もしこの部分の「9件」の部分を6の倍数（6件とか12件とか）に変更しても良ければそれで解決すると思います。

どうしても「9件」づつ表示しなければ行けない場合は、そういう仕様と割り切るのも有りだと思います。
無理やりやろうとするとウィンドウの幅をとってコンテンツが何個表示されているかを判断して一番最後の要素を幅100％にして～とか、、、
結果どうなったら正解なのかにもよりますが色々とカオスになりそうな気がします。

タグの構成とかを変えてよければこんな感じにしてみてら多少はましかもしれません。（コードはアレですが。）

投稿2018/07/20 01:56

総合スコア657

2018/07/20 03:00

ご回答ありがとうございます！サンプルまで、感謝です、、、！回答頂いたサンプルの方がhtmlで「.more」が一箇所で済んですごい嬉しいです！しかもなんか、おしゃれなアニメーションまで！！「.more」を押したあとちゃんと「記事：9」の隣に「記事：10」が配置されるのも良いです！！！（語彙力なくてすいません;）初心者の私にはアレなところがわかりません >< すごいです！図々しいお願いで本当に申し訳ないのですが、記事が全て表示し終えたら「.more」ボタンを消す方法を教えていただけないでしょうか？？

keisukeh

2018/07/20 03:08

先程のサンプルに追加しました。やってることは1ページに出す記事と全記事から何ページあるか割り出して最後のページになったらボタンを消してるだけです。だたし、このサンプルのコードは業務レベルのものではなくあくまでサンプルですので近くに詳しい方がいなくて、ご自身で解釈が難しい場合使わないほうがいいかもしれません。

shiosu

2018/07/20 03:20 編集

ありがとうございます！！！理解できていないのに使うのは駄目ですよね、、承知しました。（業務レベルじゃないとしてもすごいありがたいです、、）今回は6の倍数で、教えていただいたコードを参考にしてちゃんと理解できた部分を使って展開しようと思います。ありがとうございました！

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

解決済みですが、CSSでやってしまえばよいと思います。

CSS
1/* ADD */
2@media (max-width: 500px) {
3  .post:nth-last-child(1):nth-child(2n+1) {
4    display: none;
5  }
6}
7```**動くサンプル：**[https://jsfiddle.net/hkr0g614/](https://jsfiddle.net/hkr0g614/)
8
9---
10
11【何番目系の便利なCSSまとめ】
12[https://qiita.com/ituki_b/items/62a752389385de7ba4a2](https://qiita.com/ituki_b/items/62a752389385de7ba4a2)
13
14【CSSの:nth-childと:nth-last-child擬似クラスの使用例 | NxWorld】
15[https://www.nxworld.net/tips/css-nth-child-and-nth-last-child.html](https://www.nxworld.net/tips/css-nth-child-and-nth-last-child.html)