需要帮助使用 javascript 进行排序

Question

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

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

<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>

它非常基本，我可以概念化添加类，按类获取元素，并按该元素对其进行排序。 但我有一种感觉，它不会随身携带它的相关元素。 这是真的还是？

php 用于根据要求从数据库中获取

<?php 
  if(isset($_POST['submit'])){ 
    if(isset($_GET['go'])){ 
      if(preg_match("/^[  a-zA-Z]+/", $_POST['name'])){ 
        $name=$_POST['name']; 
        //connect  to the database 
        $db=mysql_connect  ("host", "username",  "password") or die ('I cannot connect to the database  because: ' . mysql_error()); 
        //-select  the database to use 
        $mydb=mysql_select_db("database_name"); 
        //-query  the database table 
        $sql="SELECT  movie_id, movie_title, movie_director, movie_lead_actor, movie_YOR, movie_img FROM sci_fi_movies WHERE movie_title LIKE '%" . $name .  "%' OR movie_director LIKE '%" . $name ."%' OR movie_lead_actor LIKE '%" . $name ."%'"; 
        //-run  the query against the mysql query function 
        $result=mysql_query($sql); 
        //-create  while loop and loop through result set 
          while($row=mysql_fetch_array($result)){ 
              $Title      =$row['movie_title']; 
              $Director   =$row['movie_director'];
              $Actor      =$row['movie_lead_actor'];
              $Year       =$row['movie_YOR'];
              $Image      =$row['movie_img'];
              $ID         =$row['movie_id']; 
        //-display the result of the array 
        echo "<li>";
        echo "<h4>Title</h4><p>$Title</p>";
        echo "<h4>Director</h4><p>$Director</p>";
        echo "<h4>Lead Actor</h4><p>$Actor</p>";
        echo "<h4>Year of Release</h4><p>$Year</p>";
        echo "<img src=\"$Image\"></img>";
        echo "</li>";
      } 
    } else{ 
        echo  "<p>Please enter a search query</p>"; 
    } 
  } 
} 
?>

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/

注意：如果你的列表会变得太大，你应该在从数据库中获取时考虑排序