Question

有一些标签，我需要对它们进行排序，以便使用JavaScript（不使用jQuery）按字母顺序显示。

<div id="tags">
   <p id="b"></p>
   <p id="a"></p>
   <p id="d"></p>
   <p id="c"></p>
</div>

以下是它的外观：

<div id="tags">
     <p id="a"></p>
     <p id="b"></p> 
     <p id="c"></p>
     <p id="d"></p>
</div>

我尝试使用sort（）方法对id进行排序，然后通过insertBefore（）在for循环中重新排列它们。但它不起作用。有什么想法吗？

Answer 1

您可以在排序后重新创建HTML

＆＃13;

var ps = document.querySelectorAll( "#tags p" );

var sortedPs = Array.from( ps ).sort( (a, b) => a.id.localeCompare( b.id ) ); //sort the ps

document.querySelector( "#tags" ).innerHTML = sortedPs.map( s => s.outerHTML ).join(""); //recreate the markup

＆＃13;

<div id="tags">
   <p id="b">b</p>
   <p id="a">a</p>
   <p id="d">d</p>
   <p id="c">c</p>
</div>

＆＃13;

注意

这将删除现有p
上绑定的所有现有事件。
要保留它们，请使用appendChild代替innerHTML

在保留后保留事件

＆＃13;
＆＃13;
var ps = document.querySelectorAll( "#tags p" ); var sortedPs = Array.from( ps ).sort( (a, b) => a.id.localeCompare( b.id ) ); //sort the ps var tags = document.querySelector( "#tags" ); //create a duplicate hollow tags var dupTags = tags.cloneNode(false); sortedPs.forEach( s => dupTags.appendChild ( s ) ); //replace old with new tags tags.parentNode.replaceChild(dupTags ,tags);
＆＃13;
<div id="tags"> <p id="b">b</p> <p id="a">a</p> <p id="d">d</p> <p id="c">c</p> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我更喜欢@ gurvinder372回答，但这是另一种方式。

function element_sort(id)
{
  var e = document.getElementById(id);
  var f = document.createDocumentFragment();
  var ids = [];

  var i = 0;
  var l = e.getElementsByTagName('p').length;

  while (i < l)
  {
    ids.push(e.getElementsByTagName('p')[0].id);
    f.appendChild(e.getElementsByTagName('p')[0]);
    i++
  }

  ids.sort();

  for (var i = 0; i <= ids.length; i++)
  {
    for (var j = 0; j < f.childNodes.length; j++)
    {
      if (f.childNodes[j].id==ids[i]) {
        e.appendChild(f.childNodes[j]);
      }
    }
  }
}
element_sort("tags")

<div id="tags">
   <p id="b">b</p>
   <p id="a">a</p>
   <p id="d">d</p>
   <p id="c">c</p>
</div>

按标记ID排序HTML元素

2 个答案: