我如何根据其中的一部分对整个元素进行排序？

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); 
});