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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

8259閲覧

リストを分割してページ送りで表示を切り替える

flat

総合スコア617

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2015/09/19 03:08

編集2015/09/19 13:25

リストを分割して表示するために、現在jQueryを利用して次の様にしています。
これをjQueryではなく素のJavaScriptで実装しようとしているのですが、ページ送りを表示させる箇所などで躓いており行き詰まっています。
ページ送りを含めたこの先の実装もですが、全体的に見てもっとスマートなコードに書き直せる等もあればアドバイスを頂ける嬉しいです。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 6</head> 7<body> 8 9<div id="parent"> 10 <div> 11 <ul> 12 <li>item1</li> 13 <li>item2</li> 14 <li>item3</li> 15 <li>item4</li> 16 </ul> 17 </div> 18 19 <div> 20 <ul> 21 <li>item1</li> 22 <li>item2</li> 23 <li>item3</li> 24 <li>item4</li> 25 <li>item5</li> 26 <li>item6</li> 27 </ul> 28 </div> 29 30 <div> 31 <ul> 32 <li>item1</li> 33 <li>item2</li> 34 <li>item3</li> 35 <li>item4</li> 36 <li>item5</li> 37 <li>item6</li> 38 <li>item7</li> 39 <li>item8</li> 40 </ul> 41 </div> 42</div> 43 44</body> 45</html>

JavaScript

1// jQuery 2;( function ( $ ) { 3 4 $.fn.listsplit = function ( perPage ) { 5 6 return this.each( function () { 7 8 // 分割するリストの親要素 9 var $base = $( this ); 10 11 // 分割するリスト 12 var $list = $base.find( 'ul' ); 13 14 // 分割するリストアイテム 15 var $item = $list.find( 'li' ); 16 17 // 分割するリストの長さ 18 var length = $item.length; 19 20 // 分割を開始する数 21 if( perPage ) { 22 var split = perPage; // 指定値 23 } else { 24 var split = 10; // 初期値 25 } 26 27 // リストアイテムが指定値より多い時に処理を開始 28 if( length > split ) { 29 30 // カウントを変数にセット 31 var i = 0; 32 33 // 指定値のグループに分割してクラスを追加 34 while( i < length ) { 35 var group = i * split; 36 var division = group + split; 37 for( var z = group; z < division; z++ ) { 38 $item.eq( z ).addClass( 'p-' + ( i + 1 ) ); 39 } 40 i++; 41 } 42 43 // ページ送り 44 var last = Math.ceil( length / split ); 45 var current = 1; 46 var pagenation = '<div class="list-pagenation">\n<span class="list-prev">prev</span>\n<span class="list-next">next</span>\n<span class="counter"><span class="current">' + current + '</span>/<span class="last">' + last + '</span></span>\n</div>\n'; 47 $list.before( pagenation ); 48 var $prev = $base.find( '.list-prev' ); 49 var $next = $base.find( '.list-next' ); 50 var $current = $base.find( '.current' ); 51 var $last = $base.find( '.last' ); 52 var $total = $base.find( '.total' ); 53 $current.html( current ); 54 $last.html( last ); 55 $total.html( length ); 56 $prev.addClass( 'disabled' ); 57 58 // リスト表示の初期設定 59 $item.hide(); 60 $base.find( '.p-1' ).show(); 61 62 // 次へ 63 $next.on( 'click', function () { 64 65 var page = $current.html(); 66 var setnums = Number( page ) + 1; 67 68 if( setnums <= last ) { 69 $prev.removeClass( 'disabled' ); 70 $current.html( setnums ); 71 $item.hide(); 72 $base.find( '.p-' + setnums ).stop( true, true ).fadeIn( 'fast' ); 73 } 74 75 if( setnums == last ) { 76 $next.addClass( 'disabled' ); 77 } 78 79 }); 80 81 // 前へ 82 $prev.click( function () { 83 84 var page = $current.html(); 85 var setnums = Number( page ) - 1; 86 87 if( 1 <= setnums ) { 88 $next.removeClass( 'disabled' ); 89 $current.html( setnums ); 90 $item.hide(); 91 $base.find( '.p-' + setnums ).stop( true, true ).fadeIn( 'fast' ); 92 } 93 94 if( setnums == 1 ) { 95 $prev.addClass( 'disabled' ); 96 } 97 98 }); 99 100 } 101 102 }); 103 104 }; 105 106})( jQuery ); 107 108$( function() { 109 110 $( '#parent' ).find( 'div' ).listsplit( 2 ); 111 112});

JavaScriptによる実装の途中(随時更新)
表示・非表示はjQueryとは違って.hidden { display: none }というクラスを使って行う予定

JavaScript

1// Pure JavaScript 2function eq( index ) { 3 if( index >= 0 && index < this.length ) { 4 return this[index]; 5 } else { 6 return -1; 7 } 8} 9 10function list_split( element ) { 11 'use strict'; 12 // リストを取得 13 var list = element.getElementsByTagName( 'ul' ); 14 // リストアイテムを取得 15 var item = list[0].getElementsByTagName( 'li' ); 16 // リストアイテムの数を取得 17 var length = item.length; 18 // 分割を開始するリストアイテムの数 19 var split = 2; 20 // カウント 21 var i = 0; 22 // 指定したポジションの要素を代入するための変数 23 var index; 24 25 // 指定値のグループに分割してクラスを追加 26 while( i < length ) { 27 var group = i * split; 28 var division = group + split; 29 for( var z = group; z < division; z++ ) { 30 index = eq.call( item, z ); 31 if ( typeof index === 'object' ) { 32 index.classList.add( 'p-' + ( i + 1 ) ); 33 } 34 } 35 i++; 36 } 37 38 // 最後のページ 39 var last = Math.ceil( length / split ); 40 // 現在のページ 41 var current = 1; 42 43 // ページ送り用のノードを作成 44 var pagenations = document.createDocumentFragment(); 45 46 // ページ送りをノードに追加 47 var pagenation = document.createElement( 'div' ); 48 pagenation.className = 'list-pagenation'; 49 pagenations.appendChild( pagenation ); 50 51 // 前へ戻るボタンをページ送りに追加 52 var page_prev = document.createElement( 'span' ); 53 page_prev.className = 'list-prev'; 54 page_prev.appendChild( document.createTextNode( 'Prev' ) ); 55 pagenation.appendChild( page_prev ); 56 57 // 次へ進むボタンをページ送りに追加 58 var page_next = document.createElement( 'span' ); 59 page_next.className = 'list-next'; 60 page_next.appendChild( document.createTextNode( 'Next' ) ); 61 pagenation.appendChild( page_next ); 62 63 // カウンターをノードに追加 64 var page_counter = document.createElement( 'span' ); 65 page_counter.className = 'counter'; 66 pagenations.appendChild( page_counter ); 67 68 // 現在のページをカウンターに追加 69 var page_current = document.createElement( 'span' ); 70 page_current.className = 'current'; 71 page_current.appendChild( document.createTextNode( current ) ); 72 page_counter.appendChild( page_current ); 73 74 // ページ表示の区切りをカウンターに追加 75 var partition = document.createTextNode( '/' ); 76 page_counter.appendChild( partition ); 77 78 // 最後のページをカウンターに追加 79 var page_last = document.createElement( 'span' ); 80 page_last.className = 'last'; 81 page_last.appendChild( document.createTextNode( last ) ); 82 page_counter.appendChild( page_last ); 83 84 var list_parent = list[0].parentNode; 85 list_parent.insertBefore( pagenations, list[0] ); 86 87 // 課題1: ページ送りを各リストの直前に挿入する 88 // 課題2: 変数 last の値を各リストと連動した形で反映させる 89} 90 91document.addEventListener( 'DOMContentLoaded', function () { 92 93 var parent = document.getElementById( 'parent' ); 94 var target = parent.getElementsByTagName( 'div' ); 95 var length = target.length; 96 97 for ( var i = 0; i < length; i++ ) { 98 list_split( target[i] ); 99 } 100 101});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

teratail questions-16480 への回答 - JSFiddle にサンプルコードをUPしました。

  • おそらく、見慣れないと思われるのは WAI-ARIA の aria-hidden属性でしょうか。
  • element.classListclassList.contains を使用すると更にスマートに書けますが、対象ブラウザが不明だったので一応、IE9 を基準としました。Polyfill を書くなら classList の方がベターだと思います。

(2015/09/20 10:25追記)
classList.contains を使用したコードをUPしました。IE9 用に className による代替コードも加えている為、IE9+ で動作します。

(2015/09/20 10:31追記)
className による代替コードが不完全だったのを修正しました。

(3015/09/21 07:38追記)
pagesizeelement.children.length を割り切れなかった場合に TypeError で強制終了する不具合を修正しました。

投稿2015/09/19 14:11

編集2015/09/20 22:38
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

flat

2015/09/19 15:15 編集

素晴らしいサンプルコードを作成して下さり感謝致します。 まだ理解出来ない点も多いですが、サンプルコードを読み解きながら勉強させて頂きます。 またIEに関してですが、少なくとも個人的に運営するウェブサイトであればもうIE10以下は無視して良いのではないかと思っていますので、よろしければelement.classListを利用したコードも見てみたいです。
think49

2015/09/20 01:27

classList.contains は決して難しくない為、ご自身で改造する事を期待していたのですが、何か躓くポイントがあったでしょうか。 親コメントに追記しました。
flat

2015/09/20 11:10

すみません、純粋に比較して見てみたいと安易にお願いしてしまいました。 出来そうな事はまず自分でやってみないと身に付かないですよね…。 ありがとうございます。 また、追記して下さった回答にも心から感謝致します。
flat

2015/09/20 16:22

item9まであるリストのdata-pagesizeの値を2にすると、カウントとページ送りの動作がおかしくなってしまうのですが、どう修正したら良いのか分かりません…。
think49

2015/09/20 22:41

確かに pagesize で割り切れない場合を考慮していなかったですね。コンソールを見ればどこでエラーが発生しているのがわかり、問題を特定しやすいと思います。 修正して親コメントに追記しました。
flat

2015/09/21 00:52

修正して下さりありがとうございます。 Math.minを使うだけで解決するのですね。 コンソールでエラーは見ていたのですが、私にはまだ基礎知識が足りないみたいです…。 もっとリファレンスを覚えて基礎をしっかりと身につけていこうと思います。
guest

0

list.js というライブラリーをつかってみてはどうでしょう?

私はつかったことがありませんが、他のライブラリーも紹介します。

その他:

投稿2015/09/20 22:11

katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

flat

2015/09/21 00:37 編集

回答して下さりありがとうございます。 今回はjQueryで実装していたものを素のJavaScriptに置き換えてコンパクトにしたいという狙いがあり、ページ送りもPrevとNextだけのシンプルなものにしたいので、紹介して下さったライブラリは残念ながら利用出来ません…。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問