jQueryでデータを受け渡しで動作が・・・。

質問

jQueryでデータを受け渡しで動作がどうしてもうまくいきません。

<li>タグにjsonデータを呼び出して表示しています。
それで別の処理のデータを加えるとどうしても最大６行表示の方が機能しなくなってしまいどうしたらうごくのでしょうか？
普通においただけではダメなのでしょうか？

<script type="text/javascript">
jQuery(function(){
$.getJSON("./json_sql.php",function(data){
$.each(data,function(i,items){
$("<li/>",{
text : items.category+'　'+ items.date+'　'+items.content,
'class' : items.category,
}).appendTo('ul','#portfolio');
});
});
});

$(document).ready(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').fadeOut('fast', function(){
pf.filter(filterVal + mx).fadeIn('slow');

});

});
});
</script>

<div id="main">

<ul id="navi" class="tab">
<li class="all"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#e2260d';">ALL</a></li>
<li class="topix"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0f639f';">topix</a></li>
<li class="cleaning"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0e99b0';">cleaning</a></li>
<li class="insurance"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0ea653';">insurance</a></li>
</ul>

<div id="samplebox"></div>

<div class="content">
<ul id="portfolio"></ul>
</div>

<!--/ .main-->
</div>

回答No.2

tracer

一連の質問を拝見しました。
非難するわけではないですが、足し算が分からないのに基礎解析とかやろうとしているわけですよ。学習ではなく、意味も分からず答えを聞いてしまっているので、質問者さんの疑問はどこまでいっても、きっと尽きないと思いますよ。基礎から学習することを強くおすすめします。聞くんじゃなくて。

回答No.1

fujillin

「6行表示」の回答者です。

前回のご質問では、「動的に追加する」という情報がなかったのでそのような場合を考慮をしていませんでした。

直接の原因は、初期設定時に$('#portfolio li');の内容を固定して記憶させてしまっているために、その後のリストの追加が反映されていないためだと考えられます。

ご質問で提示のものを見るところ、ajaxも初期時点で行なうだけのようなので、順序を制御してあげるだけで動作すると思います。
（コールバックの中で、イベント設定の処理全体を実行するようにするか、以下の方法でもよいです）

実際は、初期だけでなく途中でもajaxを行なうというのであれば、イベント処理で、都度リストを参照するようにしてあげればよろしいかと思います。

* できれば、終わった質問は閉じてもらえるとありがたいです。

補足

私の情報不足と説明不足がいけないのです。

一旦前のスクリプトに戻してみたところ。

スクリプトで動作はしたのですが、ページを開いた時・更新した際には、
どうしても六行表示ではなく全てのデータが表示してしまう。