jQueryでリストを分割してページ送りを表示
- jQueryを使用してリストを分割し、ページ送りで切り替える方法を紹介します。
- HTMLの部分を変更して、ページネーションを「Prev」「Next」ボタンに置き換える方法を解説します。
- 改善されたページネーションの見た目を実装するためのカウンターを追加します。
- ベストアンサー
jQueryでリストを分割してページ送りを表示
現在、以下の内容でリストを分割してページ送りで切り替えられる様にしています。 [jQuery] $(function() { var item = $('#list li').length; var i = 0; while (i < item){ var group = i * 10; var num = group + 10; for (var j = group; j < num; j++) { $('#list li').eq(j).addClass('num'+(i+1)); } i++; } /* Pagenation */ $('#list').after('<ul id="nav"></ul>') var lastrep = $('#list li:last').attr('class').replace(/no/i,''); var lists = ""; for (var i = 0; i < lastrep; i++) { lists += '<li class="page-count">'+( i+1 )+'</li>\n'; } $("nav").append(lists); /* First View */ $('#list li').hide(); $('#list .no1').show(); $('#nav li').eq(0).addClass('current'); /* Click */ $('#nav li').click(function () { var items = $(this).parent().children().index(this); var setitems = items +1; $('#list li').hide(); $('#list .no'+setitems).show(); $('#nav li').removeClass('current'); $(this).addClass('current'); }); }); [html] <ul id="nav"> <li class="page-count current">1</li> <li class="page-count">2</li> <li class="page-count">3</li> <li class="page-count">4</li> </ul> <ul id="list"> <li class="no1">item</li> <li class="no1">item</li> ... <li class="no4">item</li> </ul> このページネーションの部分を次の様にするにはどうしたら良いでしょうか…？ [html] <ul id="nav"> <li class="page-count">Prev</li> <li class="page-count">Next</li> </ul> <div class="count"><span class="now">1</span>/<span class="total">4</span></div>
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
prevが押された時の処理でページを対象の-1 nextが押された時の処理でページを対象の+1 するような処理にして、 <span class="now">は現在のページを表示するように <span class="total">はページ数を表示するようにすれば良いと思います。
関連するQ&A
- jQueryで６行表示のループ
大雑把な質問なのですが、自分でもわかっているのですが、 もっと簡単なやり方がないものかと色々とやっていたのですが、 ありませんでしょうか？ $(document).ready(function() { var nCnt2 = 1; var nMax2 = 6; if(nMax2 < $('ul#portfolio li').length) { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt2 <= nMax2) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt2++; }); } $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); var nCnt = 1; var nMax = 6; if(filterVal == 'all') { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').hide('fast').addClass('hidden'); $('ul#portfolio li.hidden').each(function() { if(nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); } nCnt++; }); } else { $('ul#portfolio li').hide('fast').addClass('hidden'); $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else if (nCnt <= nMax) { $(this).fadeIn('slow').removeClass('hidden'); nCnt++; } }); } return false; }); });
- 締切済み
- JavaScript
- jquery？css？IEで表示されません。
現在HPを作成していて、ページ内リンクに、jQueryを入れてカレントページにナビゲーションを固定するようにしています。バックに白背景がカレントページのページ内リンクにしています。クロームで確認しても動くのにIEではバックが白にならず困っています。 jQueryとcss、どちらに原因があるのかすら分かりません。 ご回答いただけると幸いです。 jQuery // JavaScript Document $(function(){ var set = 300;//ウインドウ上部からどれぐらいの位置で変化させるか var boxTop = new Array; var current = -1; //各要素の位置 $('.box').each(function(i) { boxTop[i] = $(this).offset().top; }); //最初の要素にclass="on"をつける changeBox(0); //スクロールした時の処理 $(window).scroll(function(){ scrollPosition = $(window).scrollTop(); for (var i = boxTop.length - 1 ; i >= 0; i--) { if ($(window).scrollTop() > boxTop[i] - set) { changeBox(i); break; } }; }); //ナビの処理 function changeBox(secNum) { if (secNum != current) { current = secNum; secNum2 = secNum + 1;//HTML順序用 $('#nav li').removeClass('on'); $('#nav li:nth-child(' + secNum2 +')').addClass('on'); /* 位置によって個別に処理をしたい場合 if (current == 0) { // 現在地がsection1の場合の処理 } else if (current == 1) { // 現在地がsection2の場合の処理 } else if (current == 2) { // 現在地がsection3の場合の処理 }*/ } }; }); css div#nav ul li.on { box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3),0 -3px 2px rgba(0, 0, 0, 0.25) inset; cursor:pointer; background-color:#FFF; color:#ffffff; }
- ベストアンサー
- CSS
- phpグローバルナビについて
はじめまして、以下phpでグローバルナビを読み込んでますが、2行目のphp設定である、該当ページの時だけ.current_page_itemのスタイルシートを設定する宣言をしてるのですが、なぜかトップページ以外は正常に.current_page_itemの設定がされるのですが、トップページは.current_page_itemが反映されません。 <?php if(is_home()){echo 'class="current_page_item"';} ?>の 宣言がトップページにも反映させるにはどの様にすればいいのでしょうか？ お手数ですが教えてください。 --------php設定---------------- <ul id="nav"> <li<?php if(is_home()){echo 'class="current_page_item"';} ?>> <a href="<?php bloginfo('url'); ?>" title="TOP">TOP</a></li> <?php wp_list_pages('title_li=&depth=1'); ?> </ul> </div> ------------------------ ------------グローバルナビのスタイルシート------------ #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 100px; text-decoration: none; color: #000000; } #nav li a:hover { color: #FFFFFF; background-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; }
- ベストアンサー
- PHP
- jQuery Progateの課題
ProgateのjQuery中級をやっています。FAQの質問をクリックすると答えが出てくるというものを作成しています。 解説通りにやってみて完成はしたのですが、 if文の中にある('open')というクラスはCSSの中に存在しません。 元々存在しない（'open'）クラスを探して削除したり、加えたりする意味がわかりかねます。 例えばdisplay:none;などで非表示にしていたものに以下のようなCSSを加えるのであればまだなんとなく意味が理解できます。 .open{ display:block; } しかし、CSS内にクラス('open')は存在しません。 まだ初心者です。分かりやすく解説していただけると助かります。 よろしくお願いいたします。 if($answer.hasClass('open')) { $answer.removeClass('open'); …… else { $answer.addClass('open'); …… jQuery --------------------------------------- // FAQのアコーディオン $('.faq-list-item').click(function() { var $answer = $(this).find('.answer'); if($answer.hasClass('open')) { $answer.removeClass('open'); // slideUpメソッドを用いて、$answerを隠してください $answer.slideUp(); // 子要素のspanタグの中身をtextメソッドを用いて書き換えてください $(this).find('span').text('+'); } else { $answer.addClass('open'); // slideDownメソッドを用いて、$answerを表示してください $answer.slideDown(); // 子要素のspanタグの中身をtextメソッドを用いて書き換えてください $(this).find('span').text('-'); } }); --------------------------------------- HTML --------------------------------------- <h2>FAQ</h2> </div> <div class="faq"> <ul id="faq-list"> <li class="faq-list-item"> <h3 class="question">Progateの公式キャラクターはなんですか？</h3> <span>+</span> <div class="answer"> <p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p> </div> </li> <li class="faq-list-item"> <h3 class="question">にんじゃわんこはオスですか？それともメスですか？</h3> <span>+</span> <div class="answer"> <p>にんじゃわんこはオスです。</p> </div> </li> <li class="faq-list-item"> <h3 class="question">にんじゃわんこは何歳ですか？</h3> <span>+</span> <div class="answer"> <p>にんじゃわんこは14歳です。</p> </div> </li> </ul> </div> --------------------------------------- CSS --------------------------------------- #faq-list { width: 500px; margin: 0 auto; padding: 0; list-style: none; } /*アコーディオン追加 */ .faq-list-item { margin:10px; border-bottom:1px solid #ccc; position:relative; cursor:pointer; text-align: left; } .faq-list-item h3 { font-size: 14px; } .faq-list-item span { position:absolute; top:0; right:5px; color:#ccc; font-size:13px; } .answer { font-size: 12px; display: none; padding: 5px 0px; margin-bottom: 15px; } ---------------------------------------
- ベストアンサー
- JavaScript
- 横並びのリストで左端がはみ出る
リストを横並びにしてメニューバーを作ろうとしているのですが、CSSの参考書に書いてある通りにHTMLとCSSを書いても、添付ファイルのように、どうしても左端がはみ出てしまいます。 （この例ではわかりやすいようにli要素の左にボーダーを入れています） index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>TITLE</title> <link href="nav.css" rel="stylesheet" type="text/css"> </head> <body> <ul class="nav"> <li class="nav_item"><a href="index.html">ホーム</a></li> <li class="nav_item"><a href="#">リンク１</a></li> <li class="nav_item"><a href="#">リンク２</a></li> </ul> </body> nav.css .nav { display: table; width: 100%; table-layout: fixed; padding-top: 10px; padding-bottom: 10px; background-color: #dddddd; } .nav_item { display: table-cell; border-left: thick solid #000000; } .nav_item > a { display: block; list-style-type: none; text-decoration: none; text-align: center; } どのブラウザで確認しても同じ現象です。 どうやったら正常に表示されるのか、おわかりになれば教えてください。
- ベストアンサー
- CSS
- jＱueryで作ったドロワーメニューに画像が被る
トップページにjＱueryを使ってドロワーメニューとカルーセルとアコーディオンメニューを作成しました。 それぞれは作動するのですが、ドロワーを一番上に表示させたいのにカルーセルとアコーディオンメニューが上に被ってしまいます。 jQueryは初心者です。よろしくお願いします。 【html】 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script> <script src="js/slick.min.js"></script> </head> <body> <div id="wrapper"> <header id="header"> <div class="navDrawrBtn"><span></span></div> <nav class="navDrawr" role="tablist"> <ul> <li> <a>A</a> <ul class="sub" role="tabpanel"> <li><a>a</a></li> <li><a>b</a></li> <li><a>c</a></li> </ul> </li> <li> <a>B</a> <ul class="sub" role="tabpanel"> <li><a>a</a></li> <li><a>b</a></li> <li><a>c</a></li> </ul> </li> </ul> </nav></header> <div class="contents"> <section class="carousel"> <div class="gimmicCarousel"> <ul class="slider"> <li><a href="#"><img src="images/carousel_1.jpg"></a></li> <li><a href="#"><img src="images/carousel_2.jpg"></a></li> <li><a href="#"><img src="images/carousel_3.jpg"></a></li> </ul></div></section> <div class="accordion"> <ul> <li> <a class="toggle">C</a> <ul> <li><a href="#">ca</a></li> <li><a href="#">cb</a></li> <li><a href="#">cc</a></li> </ul> </li> <li> <a class="toggle">D</a> <ul> <li><a href="#">da</a></li> <li><a href="#">db</a></li> <li><a href="#">dc</a></li> </ul> </li> <script>// ACCORDION $(function() { function accordion() { $(this).toggleClass("active").next().slideToggle(300); } $(".accordion .toggle").click(accordion); });</script> <script src="js/script.js"></script> </body> </html> 【jcript.js】 $(function () { var $nav = $('.navDrawr'); var $navBtn = $('.navDrawrBtn'); var $speed = 300; var $navW = 270; //サブメニューを非表示に $nav.find('.sub').hide(); //hover時の挙動 $nav.find('li').hover(function(){ // PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定 if ($('.navDrawrBtn span').css('display') !== 'block'){ //li要素にhoverした時に.subがあれば実行する if( $(this).find('.sub').length && !$nav.hasClass('open') ){ $(this).find('.sub').slideDown(); } }jj },function(){ // PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定 if ($('.navDrawrBtn span').css('display') !== 'block'){ if(!$nav.hasClass('open')) { $(this).find('.sub').stop(true).slideUp(); } } }); //ドロワーに関連した記述(PCでもドロワーが動作するようにtouchend→clickに変更) $('body').on('click','.navDrawrBtn span',function(){ drawerFunc(); }); $('body').on('click','.overlay',function(){ drawerFunc(); }); function drawerFunc(){ if( $('body').hasClass('menuOpen') ){ $('body').removeClass('menuOpen'); $nav.animate({right:-1*$navW},$speed,'swing'); $('.overlay').fadeOut($speed); }else{ $('body').addClass('menuOpen'); if(!$('.overlay').length){ $('#wrapper').prepend('<div class="overlay"></div>'); } $nav.animate({right:0},$speed,'swing'); $('.overlay').fadeIn($speed); } } }); //カルーセルの設定 $(function () { $('.gimmicCarousel .slider').slick({ accessibility: true, dots: true, autoplay: true, autoplaySpeed:3000, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 768, settings: { slidesToShow: 2, slidesToScroll: 1, } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, } } ] }); });
- ベストアンサー
- JavaScript
- jQueryで記事を６列表示にしたいのです。
ｊQueryで記事を６列表示にしたいのです。 jQueryで６列表示をしたいと思って試行錯誤をしていたのですが、 全くわからずじまいで、どうしたらいいのかと知恵袋に投稿致しました。 各カテゴリごとに表示をするようになっているのですが、 オールだけ全て表示になります。 ５つ残して表示させればいいのですが、各カテゴリが 消えてしまうので、どうしてもオールは６行表示させたいと思っています。 どなたか助けていただけませんでしょうか？ jQuery ---------------------------------------------- $(document).ready(function() { $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); if(filterVal == 'all') { $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); } else { $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else { $(this).fadeIn('slow').removeClass('hidden'); } }); } return false; }); }); HTML ---------------------------------------------- <ul id="navi"> <li class="all"><a href="#">All</a></li> <li><a href="#">CMS</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> <ul id="portfolio"> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">prototype</a></li> <li class="css"><a href="#">CSSビギナー</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">plugin</a></li> </ul>
- 締切済み
- JavaScript
- jquery sortableについて
２つのsortable要素があり、リスト１の特定の要素のみリスト２に移動できるようにできないでしょうか？ 下記のlist1のアイテム2のみlist2へ移動でき、アイテム１・アイテム３はlist1内でソートのみ。 <ul id="list1"> <li>アイテム1</li> <li>アイテム2</li> <li>アイテム3</li> </ul> <ul id="list2"> <li>アイテム4</li> <li>アイテム5</li> <li>アイテム6</li> </ul> $("#list1").sorable(); $("#list2").sorable();
- 締切済み
- JavaScript
- jQueryでスクロールボックスを・・・
添付画像のような縦の自動スライドショーを作ったのですがスクロールボックスのバーがそのままなのが非常に気になります。 そこで自動スライドと共にスクロールバーもそのイメージに合わせて自動スクロールさせたいのですがどうすればいいでしょうか？プラグイン、もしくはＪavaScriptの記述例を教えていただけると幸いです。宜しくお願いします。 【一部ソース】 ▼script <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true); }); </script> ▼html <div id="featured"> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"></li> ：繰り返し ： </ul> <div id="fragment-1" class="ui-tabs-panel" > <img src="img/no.jpg" alt="" width="250" /> <div class="info" > <h2></h2> </div> </div> ：繰り返し ： </div>
- ベストアンサー
- JavaScript
- 2種類のリスト項目をjQueryを使って揃えたい
スマートフォンサイト制作中です。 やりたい事は 横並びにしている2種類のリスト項目数を jQueryを使って、揃えたいって事です。 以下のようなリストがあって、 2種類のulを横並びにしています。 （2列のテーブルみたいな感じ） <ul class="column1"> <li>あいう</li> <li>かきく</li> <li>さしす</li> </ul> <ul class="column2"> <li>アイウ</li> <li>カキク</li> <li>サシス</li> <li>タチツ</li> </ul> 例として、上記の場合、class="column2"の方が<li>が一つ多いので それに合わせてclass="column１"に<li>を追加して(追加した要素の中身はブランクで)、 横並びを揃えたいのです。 ※要素の中身が2行になったりしてズレることはないです。 考え方として、おそらく class="column1"とclass="column2"のそれぞれのエレメント数を size()で取得して そのエレメント数を比較して、大きい個数に合わせて、 足りない分を、足りない<ul>要素内にappend()を使って挿入でもするのかな？？ …って思っているのですが どのように書けばよいのか、やっぱり分からないのです。 ※ちなみにHTMLの、この<ul><li>リストは動的に生成しています。 現行のPCサイトのHTMLをいじらずに スマホ対応しているので、このリストを使った横並びを変えることは出来ないのです。 どなたか詳しい方、どうかご教授ください。 どうぞ宜しくお願いいたします。
- ベストアンサー
- AJAX
お礼
お礼コメントに書くのは間違っているかもしれませんが、回答を元にした現在の経過です。 タブだとindexとeqでタブとコンテンツの位置を合わせてあげれば良かったのですが、こういったグループごとに切り替えたい場合はどうしたら良いのか…。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>分割したリストをページ送りで表示</title> <script> $(function() { var split = 5; var division = 0; var items = $( '#list li' ).length; if( items > split ) { // ページネーション作成 $( '#list' ).before( '<ul id="pagenation">\n</ul>\n<span id="page"></span>\n' ); var prev = '<li id="list-prev">Prev</li>\n'; var next = '<li id="list-next">Next</li>\n'; $( '#pagenation' ).append( prev ); $( '#pagenation' ).append( next ); // 表示内容を関数に function display() { $( '#page' ).html( division + 1 + '/' + Math.ceil( items / split ) ); $( '#list li' ).hide(); $( '#list li:gt(' + division * split + '):lt(' + split + ')' ).stop( true, true ).fadeIn( 'fast' ); } // Prevをクリックしたときの処理 $( '#list-prev' ).click( function() { if( division > 0 ) { division--; display(); } }); // Nextをクリックしたときの処理 $( '#list-next' ).click( function() { if( division < ( items - 1 ) / split - 1 ) { division++; display(); } }); display(); } }); </script> </head> <body> <ul id="list"> <li>item01</li> <li>item02</li> <li>item03</li> <li>item04</li> <li>item05</li> <li>item06</li> <li>item07</li> <li>item08</li> <li>item09</li> <li>item10</li> <li>item11</li> <li>item12</li> <li>item13</li> <li>item14</li> <li>item15</li> </ul> </body> </html>
補足
回答ありがとうございます。 丁度そのページ送りの処理をどうしたら良いのか分からずに質問させて頂きました…。 ページ位置の表示については次の様にする事で解決できそうです。 var item = $('#list li').length; var i = 0; var split = 10; // リストアイテムを分割する数 /* Pagenation */ $( '#list' ).before( '<ul id="nav">\n</ul>\n<span id="page"></span>\n' ); var prev = '<li id="list-prev">Prev</li>\n'; var next = '<li id="list-next">Next</li>\n'; $( '#nav' ).append( prev ); $( '#nav' ).append( next ); $( '#page' ).html( i + 1 + '/' + Math.ceil( item / split ) ); ページ送りの部分をもう少し試行錯誤してみます。