jQueryで記事を６列表示にしたいのです。

締切済

質問者：owo0223
質問日時：2012/01/26 14:26
回答数：5件

ｊ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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： tracer
回答日時：2012/01/27 17:48

> 何とかできたのですが、こんな感じでいいのか不安です。

目的が「ul#portfolio内の項目数を6つに制限する」なのであれば、ひとまず動くんじゃないでしょうかね。
クリックの度に動作させているので、あまり効率よくありませんが。
ま、動いているのであればいいんじゃないですか。

私の前の回答をreadyのすぐ下の行あたりに書いても動くはずですよ。
1行で済みますし。

$("li","#portfolio").eq(5).nextAll().remove();

質問者さんのコードは、

・全部非表示にする。
・必要分だけ表示

をクリックの度に繰り返しているというものですが、
私の回答は、

・ページ読み込み時に、7つめ以降の項目を削除(非表示ではない)する。

というものでした。
参考までに。

- 0
- 件

通報する

No.4

回答者： tracer
回答日時：2012/01/27 04:09

スーパースペシャルミラクル読心術を使ってお応えするならば、要は、ul#portfolioのliを5つにしたいということかな。

それならば、

$("li","#portfolio").eq(4).nextAll().remove();

でいけますよ。

この回答への補足

わからないなりにこういった感じ者を作りたいと思っていました。

何とかできたのですが、こんな感じでいいのか不安です。

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

補足日時：2012/01/27 14:29

通報する

- 0
- 件

通報する

No.3

回答者： fujillin
回答日時：2012/01/26 22:44

同じく、質問の意味がさっぱりわかってない者ですが、

察するところ、いろいろな絞込みができればとりあえずの用には足りそうな…
当たるも八卦ということで、勝手に違うもの（代わり）を作成してみました。

＞cssはデザインだけなので、使用はしていません
ul内のクラス設定は使用していないと考えていいのですね？
その割には、コードではクラス設定をしたりしているのが疑問ですが、それは置いておいてクラスをキーワードに利用してしまうという案。

クリックしたリストのクラスとマッチするものが表示されます。
別にセットでリストを用意しておかなくても、チェックボックスなどで自由に組み合わせられる方が良さそうですが、リストの方がもとの形に近いということで…（当たるも八卦なので、原理のみのコードです）

「all」だけは特別な語として扱うようにしています。

ご提示のコードの、クラスを操作している部分は（↑）の「使用していない」ということから不要と見做して省き、また、コード中でreturn falseになっているので、リンクも不要と判断して省いています。

（以下、全角空白は半角に）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.5.0");</script>

<script type="text/javascript">

</script>
</head>
<body>

<ul id="navi">
<li class="all">全部</li>
<li class="animal">動物</li>
<li class="fish">魚</li>
<li class="bird">鳥</li>
<li class="large">大きいもの</li>
<li class="middle dog">中型の犬</li>
<li class="ocean fish">海の魚</li>
<li class="africa large">アフリカの大きなもの</li>
<li class="africa large bird">アフリカの大きな鳥</li>
</ul>

<ul id="portfolio">
<li class="animal elephant large africa">アフリカ象</li>
<li class="animal elephant large asia">アジア像</li>
<li class="animal giraffe large africa">キリン</li>
<li class="animai dog middle asia">芝犬</li>
<li class="animal dog middle europe">ドーベルマン</li>
<li class="animal dog little america">チワワ</li>
<li class="animal large ocean">シロナガスクジラ</li>
<li class="fish little ocean">秋刀魚</li>
<li class="fish little river">錦鯉</li>
<li class="fish little ocean river">鮭</li>
<li class="bird large africa">ダチョウ</li>
<li class="bird middle america">コンドル</li>
<li class="bird middle asia">トキ</li>
</ul>

</body>
</html>

- 0
- 件

通報する

No.2

回答者： LancerVII
回答日時：2012/01/26 16:41

こんにちは。

補足ありがとうございます。
読解力が無く申し訳ございません。何をしたいか伝わって来ません。

id="navi"のリンクを選択したらid="portfolio"の内容が表示されたり非表示になったりする動作なのでしょうか。

例えば、CMSをクリックするとil class="cms"が表示されたり非表示になったり。

で、質問のオールで6行とは何が6行なんでしょうか。

このスクリプトがこういう操作をしたらこうなるんです。
でも、こうしたいんだけどこうなってしまうんです。

具体的に何をしたときにどうなって、何をしたらどうしたいというのを補足いただけませんか。

キーワードとなっている
6行とは？
記事とは？

これがわからないと何をアドバイスして良いかわかりかねます。

自分は仕様ややりたいことがわかっているのでしょうが、回答者は仕様、やりたいことわかりません。
補足いただく前にきちんと読み返して、これで伝わるかどうか確認してから補足してください。