Нужна помощь в сортировке с помощью javascript

Question

У меня есть задание, которое запрашивает у меня загрузку содержимого из базы данных и возможность сортировать его по отдельному полю с помощью javascript. Моя база данных работает нормально, но у меня есть сортировка, с которой у меня возникают проблемы.

Вот пример результатов от поиска Киллиан Мерфи

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

Примечание: если ваш список станет слишком большим, вы должны рассмотреть порядок при извлечении из базы данных