2015-09-14 128 views
0

爲了我有這樣的事情:如何動態地更改鏈接

<div class="list-group list"> 
    <a href="blabla" id="1" data-order="1">Hello</a> 
    <a href="blabld" id="2" data-order="2">World</a> 
</div> 

不,我嘗試使用普通的JavaScript動態更改鏈接的順序。

有沒有人有任何建議,如何做?

我的目標是:

<div class="list-group list"> 
    <a href="blabld" id="2" data-order="1">World</a> 
    <a href="blabla" id="1" data-order="2">Hello</a> 
</div> 
+0

可能重複http://stackoverflow.com/questions/25850389/how- i-can-change-child-elements-order-in-js) – Mattias

+0

哦,等待,純JS和不jQuery ...抱歉,不是重複。我如何取消標誌? – Anders

回答

1

在這裏你去:

function sort(r) { 
    var $list = document.getElementsByClassName('list')[0]; 
    var listGroupA = document.getElementsByTagName('a'); 
    var $listGroupA = []; 
    for (var i = 0; i < listGroupA.length; ++i) { 
     $listGroupA.push(listGroupA[i]); 
    } 
    $listGroupA.sort(function (a, b) { 

     return r * (a.getAttribute('data-order') - b.getAttribute('data-order')); 

    }); 
    for (var i = 0; i < $listGroupA.length; i++) { 
     $list.removeChild($listGroupA[i]); 
    } 
    for (var i = 0; i < $listGroupA.length; i++) { 
     $list.appendChild($listGroupA[i]); 
    } 
} 
var reverse = 1; 
$('#sort').click(function() { 

    reverse = reverse * -1; 
    sort(reverse); 
}); 

而且fiddle

的[?我怎樣才能改變子元素的JS訂購(
0

您可以刪除最後一個列表項,創造一個更加項,並將其追加到div容器是這樣的:

var world = document.getElementById("2"); 
var id = world.id; 
var data = world.getAttribute("data-order"); 
var div = document.getElementsByClassName("list")[0]; 

div.removeChild(world); 
var newA = document.createElement("a"); 
div.appendChild(newA); 
newA.id = id; 
newA.dataset.order = data; 
0

JSFiddle Example

Reorder = function() 
{  
    var x = document.getElementsByTagName('a'); 
    document.getElementsByClassName('list').innerHTML = ""; 
    var content = ""; 
     for(i = x.length; i > 0; i--) 
     { 
      content = content + x[i - 1].outerHTML; 
     } 
    document.getElementsByClassName('list').innerHTML = content; 
} 

上面的代碼將把現有的項目放入一個數組並清除內容。現在,他們將被添加到分區。我在這裏使用了classname將它添加到div中。