私は私の勤務スケジュールの選択に役立つWebアプリケーションを持っています。基本的に私はiTunesをエミュレートしようとしています。各作業スケジュールはソート可能なリスト項目です。リスト項目は、別々の順序付けられていないリストにロードされたajaxです。左側には、再生リストのように機能する順序付けられていないリストがあるサイドバーがあります。作業スケジュールをドラッグ＆ドロップして、順序を変更したり、異なるリストに変更したりすることができます。左のリストをクリックすると、そのリストのリスト項目だけが表示されます。すべてのものは、firefoxで素晴らしい作品です。しかし、他のブラウザを使用すると、左側のサイドバーでラインリストをクリックした後に非常に遅くなります。リスト項目の数が増えると、速度が遅くなります。jquery uiを使用するWebアプリケーションは、Firefoxで動作しますが、Firefoxでは動作しますが、他のブラウザでは動作しません。
私のjqueryコードは、文書の先頭にあります。 ここにテストページのhtmlがあります。
<body>
<div id='sideBar'>
<p class='listTitle'>LIBRARY</p>
<ul class='lineList'>
<li id='all_lines' class='list'>All Lines<span class='listTotal'>5</span></li>
</ul>
<p class='listTitle'>Line Lists<span class="addList ui-icon ui-icon-circle-plus">h</span></p>
<ol id="userLists" class='lineList'>
<li id='top_picks' class='list' >Top picks<span class='listTotal'>5</span> </li>
<li id='one_day' class='list' >One day<span class='listTotal'>5</span></li>
<li id='two_day' class='list' >Two day<span class='listTotal'>5</span></li>
<li id='three_day' class='list' >Three day<span class='listTotal'>5</span></li>
<li id='four_day' class='list' >Four Day<span class='listTotal'>5</span></li>
<li id='mixed' class='list' >Mixed<span class='listTotal'>5</span></li>
<li id='reserve' class='list' >Reserve<span class='listTotal'>5</span></li>
<li id='deleted' class='list' >Deleted<span class='listTotal'>5</span></li>
</ol>
</div> <!-- end of Sidebar div div (holds all the line lists on the right side) -->
<div id='linecontainer' class='ui-widget'>
<!-- each ul could have 0 to as many as 300 list items -->
<ul id="TOP_PICKS" class='ui-widget-content'>
<li>lots of line html</li>
<li>many many list items </li>
<li>repeat for each list below</li>
</ul>
<ul id="ONE_DAY" class='ui-widget-content'></ul>
<ul id="TWO_DAY" class='ui-widget-content'> </ul>
<ul id="THREE_DAY" class='ui-widget-content'> </ul>
<ul id="FOUR_DAY" class='ui-widget-content'> </ul>
<ul id="MIXED" class='ui-widget-content'> </ul>
<ul id="RESERVE" class='ui-widget-content'> </ul>
<ul id="DELETED" class='ui-widget-content'> </ul>
</div> <!-- End linecontainer div -->
<div id='sequence' title=""> </div>
<div id='loading' class='ui-widget-content'> <p>Loading...<span class="ui-progressbar-value">.</span></p></div>
クリックした行の一覧に応じて行を表示する機能はこれです。
// LINE LIST CLICK EVENT
// Want user to be able to add list so made this live()
$(".list").live('click', function() {
// when user clicks on list, we only want to show lines in that list, hide all the others
var $listTarget = $(this);
$("#sideBar li").removeClass('ui-state-active');// remove last line highlight
$listTarget.addClass('ui-state-active');//add style to current list
//var allLines = $('li.line'); // find all lines
// decided better way is to target smaller amount of UL's to show or hide
var allLists = $('#linecontainer ul');// get all the UL's that the lines are inside
var thelistName = $listTarget.attr("id");
if(thelistName == "all_lines") {
//users wants to see all lines at once
allLists.show();
}
else {
//user wants only to see one list of lines
//build the selector that finds the ul list
//list id matches ul id but in Uppercase so both are unique
var TargetedList = '#' + thelistName.toUpperCase();
allLists.hide();
$(TargetedList).show();
}
});
私はtop_picks-」と「top_picks」としてサイドバーリスト項目のIDと関連付けられているコンテナのリストを有する試みに一度ロアケースに一度大文字で、二回IDを使用して、そしてする問題であったと考え同じ問題が残っていました。
入力いただきありがとうございます。
更新 私のタイトルは実際に正しく言われていないと思います。私はjqueryのアニメーションの問題があります。私はlinecontainer div内の8つの異なるリストに、ajaxによってロードされた多数のリスト項目（場合によっては最大300）を持っています。ユーザーは、リストアイテムをサイドバーにドラッグアンドドロップして、リストアイテムが属するアイテムを変更することができます。
ここで示すjavascriptは、ユーザーがクリックしたリストを特定し、すべてのリストアイテムを非表示にしてから、目的のリストに属するリストアイテムのみを表示します。
ページ上の8個の順序付けられていないリストを対象にして、ページ上の300個のリストアイテムをすべて見つけてアニメーション化するのではなく、それらをアニメーション化するほうが早いと思っていました。再びfirefoxはこれを行うのは速いが、chrome、safariは遅すぎる。ブラウザがどのようにDOM要素を見つけたかと関係があります。
jmm - あなたのコードでソート可能な言葉が何も表示されていません。あなたがソート可能でない場合、ソート可能でない理由を説明するのは難しいでしょう。おそらく、より完全な表現としてコードを更新し、jsFiddleにいくつかの作業/半作業コードを入れることもできますか？乾杯！ – Mitch
ソート可能です。テストページの上部にリンクがあります。私は、ページリンクを信用しない人は考えていないと思うし、決してjsFiddleを使わなかった、私はそれをチェックしてそこに何かを得るだろう。 – jmm
Mitch - jsFiddleが動作しないように見えません。私は人々のためにこのポストのためだけに作成された完全に実用的な例を持っている。 jqueryコード全体がページ内にあります。私は、問題の可能性が最も高いと思った部分を貼り付けました。 firefoxで試してみると、他のブラウザで見たときにどのくらい遅く走るのかがわかります。再び、リンクは投稿の上部にあります。 – jmm