Question

我有一项任务要求我从数据库加载内容，并能够使用javascript通过单独的字段对其进行排序。我的数据库运行正常，但它的排序部分我遇到了麻烦。

以下是搜索Cillian Murphy的结果示例

editor.addButton('sizes', {
  type: 'menubutton',
  icon: 'myOwnIcon',
  ... 
    load `fontsize_formats` here
  ...
   });

它很基本，我可以概念化添加类，按类获取元素，并按该元素对其进行排序。但我觉得它不会带有它的相关元素。这是真的吗？

php根据请求从数据库中提取

<ul>
<li>
<h4>Title</h4>
<p>Sunshine</p>
<h4>Director</h4>
<p>Danny Boyle</p>
<h4>Lead Actor</h4>
<p>Cillian Murphy</p>
<h4>Year of Release</h4>
<p>2007</p>
<img src="http://cs1.ucc.ie/~jjam2/assignment/images/sunshine.jpg">
</li>

<li>
<h4>Title</h4>
<p>28 Days Later</p>
<h4>Director</h4>
<p>Danny Boyle</p>
<h4>Lead Actor</h4>
<p>Cillian Murphy</p>
<h4>Year of Release</h4>
<p>2002</p>
<img src="http://cs1.ucc.ie/~jjam2/assignment/images/28_days_later.jpg">
</li></ul>

Answer 1

在代码中添加一些类：

<ul>
    <li>
        <h4>Title</h4>
        <p class='title'>Sunshine</p>
        <h4>Director</h4>
        <p class='director'>Danny Boyle</p>
        <h4>Lead Actor</h4>
        <p class='actor'>Cillian Murphy</p>
        <h4>Year of Release</h4>
        <p class='year'>2007</p>
        <img src="http://cs1.ucc.ie/~jjam2/assignment/images/sunshine.jpg">
    </li>

    <li>
        <h4>Title</h4>
        <p class='title'>28 Days Later</p>
        <h4>Director</h4>
        <p class='director'>Danny Boyle</p>
        <h4>Lead Actor</h4>
        <p class='actor'>Cillian Murphy</p>
        <h4>Year of Release</h4>
        <p class='year'>2002</p>
        <img src="http://cs1.ucc.ie/~jjam2/assignment/images/28_days_later.jpg">
    </li>
</ul>

这是javascript

var DIR = 1; //direction 1 or -1
var mylist = $('ul');
var listitems = mylist.children('li').get();
var field_class = 'actor';
listitems.sort(function(a, b) {
return $(a).find('.'+field_class).text().toUpperCase().localeCompare($(b).find('.'+field_class).text().toUpperCase()) * DIR;
});
$.each(listitems, function(idx, itm) { mylist.append(itm); });

检查小提琴http://jsfiddle.net/6m3d7af7/

注意：如果您的列表太大，您应该在从DB

获取时考虑订购

需要帮助排序与JavaScript

1 个答案: