0

我有一个 Web 应用程序，可以用来帮助我选择我的工作时间表。基本上我正在尝试模仿iTunes。每个工作计划都是一个可排序的列表项。列表项被 ajax 加载到单独的无序列表中。左侧是带有无序列表的侧边栏，就像播放列表一样。您可以上下拖放工作计划以更改其顺序或将其更改到不同的列表中。当您单击左侧的列表时，只会显示该列表中的列表项。每件事在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();
    }
});

我认为使用 id 两次，一次是大写，一次是小写是问题所在，所以我尝试将侧边栏列表项 id 设置为“top_picks”，将关联的容器列表设置为“top_picks-list”，但仍然相同问题。

感谢您的意见！

更新 我猜我的标题措辞并不正确。我有一个 jquery 动画问题。我有大量列表项（在某些情况下最多 300 个）由 ajax 加载到 linecontainer div 内的 8 个不同列表中。用户可以将列表项拖放到侧边栏上以更改列表项所属的位置。

我在此处显示的 javascript 句柄确定用户单击了哪个列表，然后隐藏所有列表项，然后仅显示属于所需列表的列表项。

我认为以页面上的 8 个无序列表为目标并对其进行动画处理会更快，而不是在页面上找到所有 300 个列表项并对其进行动画处理。Firefox 在这方面做得很快，但 chrome、safari 太慢了。它必须与浏览器如何找到 DOM 元素有关。

4

1 回答 1

0

我能够将问题简化为另一个问题中更简单的示例。似乎一个错误可能在 chrome 中。这是其他问题的链接。

于 2011-01-30T17:23:46.463 回答