使用 jquery ui 的 Web 应用程序可排序、拖放、动画在 Firefox 中工作，但在其他浏览器中不起作用
我有一个网络应用程序，用来帮助我选择工作时间表。基本上我正在尝试模仿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 元素有关。
I have a web application that I use to help me choose my work schedule. Basically I'm trying to emulate itunes. Each work schedule is a list item that is sortable. The list items are ajax loaded into separate unordered lists. On the left is a sidebar with an unordered list that acts just like a play list. You can drag and drop work schedules up and down to change their order or over onto different lists. And when you click on a list on the left, only the list items in that list show up. Every thing works great in firefox. But when using other browsers it gets incredibly slow after you click on a line list in the left sidebar. As the number of list items increases, the speed slows down.
My jquery code is in the head of the document
Here is the html for the test page.
<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>
And the function that displays the lines depending on which line list you click on is this.
// 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();
}
});
I thought that using the id twice, once in upper case, and once in lower case was the problem so I tried having the sidebar list item id as "top_picks" and the associated container list as "top_picks-list" but still had the same problem.
I appreciate your input!
UPDATE
I guess my title isn't really worded correctly. I have a jquery animation issue. I have a large number of list items(up to 300 in some cases) loaded by ajax, into the 8 different lists inside linecontainer div. The user can drag and drop the list item onto the sidebar to change which the list item belongs to.
The javascript I show here, handles determine which list the user clicked, and then hiding all list items, then showing only list items that belong to the desired list.
I thought it would be faster to target the 8 unordered lists on the page and animate those instead of finding all 300 list items on the page and animating those. Again firefox is fast at doing this but chrome, safari are way too slow. It must have to do with how the browsers finds the DOM elements.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我能够将问题简化为另一个问题中更简单的示例。看来 Chrome 中可能存在错误。以下是其他问题的链接。
I was able to reduce the problem to much simpler example in another question. It appears a bug might be in chrome. Here is link to other question.