Question

我有一个用于帮助我选择工作时间表的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元素有关。

Answer 1

我能够在另一个问题中将问题简化为更简单的例子。看来Chrome中可能存在错误。这是指向其他question的链接。

使用jquery ui可排序，拖放，动画的Web应用程序可以在Firefox中运行，但不能在其他浏览器中运行

1 个答案: