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;
});
});

回答No.3

fujillin

#1です。

#2の補足をみましたが、意味がつかめません。

＞情報が増えた時に一覧っといったものを表示したいなっと思っています
ご提示のタブの「すべて」というのと「一覧」は違うのでしょうか？
普通に考えると同じもののようにも思えますが？

＞各タブの一覧は別のリンク先を指定したいのですが
各タブに「一覧」があるということは、通常時は表示する内容の項目数を最新から○○個とかに固定しておいて、「一覧」をクリックすると過去の分が全部表示されるというイメージでしょうか？
その「一覧」を表示するソースが別のhtmlファイルで用意されているとするならば、普通に
　<a href～>一覧</a>
のようなリンクを設定しておけばＯＫではないのでしょうか。

あるいは、それをページ遷移なしでやりたいという意味なのでしょうか？
その場合は、
　1）最初に全部読み込んでおいて、○○個以降は非表示にしておく
　　一覧をクリックしたらその部分も表示する

それではページが重くなるというのであれば、
　2）ajaxを利用して一覧の内容を追加で読み込む
などの方法が考えられます。
（テキストだけなら、大して重くはならないと思いますが）

ただし、2)の場合は、スクリプトだけではなくサーバサイドのプログラム（cgiやphpなど）が必要となります。

回答No.2

fujillin

#1です。

うっかりしました。
ご質問はhide()ではなくfadeOut()でしたね。
見た目には大して変わりはありませんけれど、一応、違うので…

あと、*のセレクタは省略してしまったほうが無駄がないかも。（jQueryの中身を見てないので不明）

修正しておいてください。

補足

ご回答ありがとうございます。
もう一点ご質問追加したいのです。

スクリプトの動きの中で、タブ表示になっているのですが。

今現在タブ表示を４つ程表示しています。

｜すべて｜デザイン｜イラスト｜写真｜
------------------------------
｜01/30 写真　　　公開しました。
｜01/30 イラスト 　公開しました。
｜01/30 デザイン 公開しました。
｜01/30 イラスト 公開しました。
｜01/30 デザイン 公開しました。
｜01/30 デザイン 公開しました。
------------------------------

各タブで表示していているのですが、情報が増えた時に
一覧っといったものを表示したいなっと思っています。

｜すべて｜デザイン｜イラスト｜写真｜
------------------------------
｜01/30 写真　　　公開しました。
｜01/30 イラスト 　公開しました。
｜01/30 デザイン 公開しました。
｜01/30 イラスト 公開しました。
｜01/30 デザイン 公開しました。
｜01/30 デザイン 公開しました。
｜
｜　　　　　　　　　　　　　　　　　　一覧
------------------------------

各タブの一覧は別のリンク先を指定したいのですが、
そういったのはどのように表示させれば良いのでしょうか。

回答No.1

fujillin

ありゃ、そういうことだったのね。

＞もっと簡単なやり方がないものかと色々とやっていたのですが、
＞ありませんでしょうか？
記述を簡単にしたいという意味でしょうか？
それなら、同じようなことを何度も記述せずに、必要最小限にすれば簡単になるでしょう。

例えば、「一旦全部を非表示にして、必要なものだけ表示する」といった具合。
あとはセレクタを工夫して使うことと、同じ要素のセレクトを何度も記述するよりはメソッドチェーンを利用した方が簡単だし、処理効率も上がるはずです。

前の質問でクラスは関係なさそうだったので、クラスの操作を省いていますが例えばこんなのでは？

$(function(){
var max = 6; /*最大表示数*/

var mx = ':lt(' + max + ')',
pf = $('#portfolio li');
pf.filter(':not(' + mx + ')').hide();

$('#navi a').click(function(){
var filterVal = '.' + $(this).text().toLowerCase().replace(' ', '-');
if(filterVal=='.all') filterVal = '*';
pf.filter(':visible').hide('fast', function(){
pf.filter(filterVal + mx).fadeIn('slow');
});
});
});

クラスの操作を行なう場合も、必要な要素がセレクトされたところでaddClass()やremoveClass()を挿入するだけでできるはずです。