我如何根據其中的一部分對整個元素進行排序？

Question

我有具有通式結構

<tr> 
    <td>1</td> 
    <td> 
    <a href="http://www.anime-planet.com/anime/accel-world">Accel World</a> 
    </td> 
</tr 

但具有更多的錶行的表，每一個都具有與索引和另一TD與的節目的標題和一個地方的「一個元件」一個TD找到表演。

我最終將其排序，根據a元素的文本內容以及標籤內的內容按字母順序排序。然後，我將所有這些外部排列爲一個數組，並將它們插回到元素中。問題是href沒有移動。我對文本內容進行排序，但沒有對文本所對應的超級引用鏈接進行排序。

如何將它分類到超級引用對應於標題內的文本的位置？請記住，我無法根據href對其進行分類並插入，因爲太多的特殊情況導致它無法工作。

這是我的代碼到目前爲止，您可以忽略parseText，因爲它是生成表的。

function parseText(file, tableNumb, link) { 
var xhr = new XMLHttpRequest(); 
xhr.open('GET', file, true); 
xhr.send(null); 
xhr.onload = function() { 
    if(xhr.status === 200) { 
     var response = xhr.responseText; 
     var reg = /[^|(\r\n|\n|\r)]+/g; 
     var regResponse = response.match(reg); 
     var table = document.getElementById(tableNumb); 
     var length = 0; 
     var tIndex = 1; //get the length of the table to match number count 
     var count = 0; 
     var links = []; 
     for(i = length; i < regResponse.length/2;i++){ 
      var row = table.insertRow(-1); 
      var cell = row.insertCell(-1); 
      var cell1 = row.insertCell(-1); 
      cell.innerHTML = tIndex; 
      cell1.innerHTML = '<a href=\'' + regResponse[count+1] + '\'>' + regResponse[count] + '</a>'; 
      link[i] = regResponse[count]; 
      count++; 
      count++; 
      tIndex++; 
      } 
     sorted(link); //keep 
    } 
} 



    } 
    var sortList = document.getElementById("one"); 
    var link = sortList.getElementsByTagName("a"); 


    var sortList2 = document.getElementById("two"); 
    var link1 = sortList2.getElementsByTagName('a'); 
    var sortList3 = document.getElementById("three"); 
    var link2 = sortList3.getElementsByTagName('a'); 


parseText('Watched.txt', 'one', link); 
parseText('Watching.txt', 'two', link1); 
parseText('Dropped.txt', 'three', link2); 

function sorted(sortList) { 
    var sibling = []; 


    for(i = 0; i < sortList.length; i++){ 
     sibling[i]=sortList[i].textContent; 

    } 

    function insensitive(s1, s2) { 
     var s1lower = s1.toLowerCase(); 
     var s2lower = s2.toLowerCase(); 
     return s1lower > s2lower ? 1 : (s1lower < s2lower? -1 : 0); 
    } 
    sibling.sort(insensitive); 

    for(var i = 0; i < sortList.length; i++){ 
     sortList[i].childNodes[0].nodeValue=sibling[i]; 


    } 

    } 

下面是一個表中的一些數據：

Attack on Titan|http://www.anime-planet.com/anime/attack-on-titan 
Durarara!!|http://www.anime-planet.com/anime/durarara 
Kyoukai no Kanata|http://www.anime-planet.com/anime/beyond-the-boundary 
Log Horizon|http://www.anime-planet.com/anime/log-horizon 
Mahou Shoujo Madoka Magica|http://www.anime-planet.com/anime/mahou-shoujo-madoka-magica 
Mushishi|http://www.anime-planet.com/anime/mushishi 
Naruto|http://www.anime-planet.com/anime/naruto 
Neon Genesis Evangelion|http://www.anime-planet.com/anime/neon-genesis-evangelion 
Space Dandy|http://www.anime-planet.com/anime/space-dandy 
Tengen Toppa Gurren Lagann|http://www.anime-planet.com/anime/tengen-toppa-gurren-lagann 
Ore Monogatari|http://www.anime-planet.com/anime/my-love-story 
Yahari Ore no Seishun Love Come wa Machigatteiru|http://www.anime-planet.com/anime/yahari-ore-no-seishun-love-come-wa-machigatteiru 
Diebuster|http://www.anime-planet.com/anime/gunbuster-2 

Answer 1

首先，這是當你應該使用一個框架的一個最好的例子。做像你想要使用說角度的東西可以用更少的代碼完成，並且更容易維護。有了這樣說，我趕緊使用純JS來解決什麼，我想你把一個小提琴正在尋找：

https://jsfiddle.net/7sd6nwxq/2/

// given a url, return the responseText in a callback 
function ajaxText(url, cb) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', url, true); 
    xhr.send(null); 
    xhr.onload = function(){ 
     if(xhr.status === 200) { 
      var response = xhr.responseText; 
      cb(null, response); 
     } 
    } 
    xhr.onerror = function(err){ 
     cb(err); 
    } 
} 

// convert text string into a list of items 
function listFromText(text){ 
    var list = []; 

    var reg = /[^|(\r\n|\n|\r)]+/g; 
    var regResponse = text.match(reg); 

    for(var i=0; i<regResponse.length; i+=2){ 
     list.push({ 
      title: regResponse[i], 
      href: regResponse[i+1] 
     }); 
    } 

    return list; 
} 

// function for performing lower case sorting on items 
function sorter(a, b){ 
    var s1lower = a.title.toLowerCase(); 
    var s2lower = b.title.toLowerCase(); 
    return s1lower > s2lower ? 1 : (s1lower < s2lower? -1 : 0); 
} 

// function for building the table html from a list 
function buildTable(id, list){ 
    var table = document.getElementById(id); 
    for(var i=0; i<list.length; i++){ 
     var row = table.insertRow(-1); 
     var cell = row.insertCell(-1); 
     var cell1 = row.insertCell(-1); 

     cell.innerHTML = i; 
     cell1.innerHTML = '<a href=\'' + list[i].href + '\'>' + list[i].title + '</a>'; 
    } 
} 

// get the text via ajax from a gist i created 
ajaxText('https://gist.githubusercontent.com/matt-way/90eb514ed8d897649be9/raw/538a7bbfd0f7406634190c3dac0984e6c2dcc532/ajaxtest.txt', function(err, resultText){ 
    // get the unsorted list 
    var tableList = listFromText(resultText); 
    // sort the list 
    tableList.sort(sorter); 
    // build the html from the sorted list 
    buildTable('1', tableList); 
});