javascript 按标题排序html集合

wljmcqd8 于 2023-03-11 发布在 Java

关注(0)|答案(2)|浏览(113)

vanilla javascript starter在这里。我正在尝试排序我的一些元素，我在一个列表中。在浏览了很多现有的解决方案，但没有一个工作，我想这是一个问题，我不知道如何制定我正在寻找的，所以也许有人更有经验可以帮助我。
所以我试着把我的列表按字母顺序排序，然后在html集合中更改。项目看起来像这样：

<li class="foodListItem" title = "potato">
        <div class="img">
          <a href="" title="potato">
            <img src = "FoodImages/potato.jpg" alt="Potato">
          </a>
        </div>
        <p class="name">
          <a href="" title="potato"> Potato</a>
        </p>
      </li>
      <li class="foodListItem" title="brocolli">
        <div class="img">
          <a href="" title="brocolli">
            <img src = "FoodImages/brocolli.jpg" alt="brocolli">
          </a>
        </div>
        <p class="name">
          <a href="" title="brocolli"> brocolli</a>
        </p>
      </li>

而我所得到的最接近于取代它的方法是这样的：

function sortImages()
{
    var foodList= document.getElementsByClassName("foodListItem");
    foodArray = Array.from(foodList);
    foodArray.sort(function (a, b){
        if(a.title < b.title)
        {
            return -1;
        }
        if(a.title > b.title){
            return 1;
        }
        return 0;
    });
    for(var i = 0; i < foodArray.length; i++)
    {
        foodList[i].replaceWith(foodArray[i]);
    }
}

然而，用这种方法，我似乎在替换元素时丢失了元素，否则我就不能用其他方法正确地替换它们。有人知道更好的解决方案吗？

JavaScript

来源：https://stackoverflow.com/questions/75696519/sorting-htmlcollection-by-title

2条答案

按热度按时间

rmbxnbpk1#

replaceWith()截断实时列表：一个给定的HTML元素示例在一个文档中只能存在一次，所以如果你用y替换x，那么x实际上被移动了，它从它的原始位置消失了，因此HTMLCollection变成了一个短元素。这样循环在中间失败（可能有元素替换自己的情况），原始列表大约减半：

function sortImages()
{
    var foodList= document.getElementsByTagName("div");
    foodArray = Array.from(foodList);
    foodArray.sort((a, b)=>a.innerText.localeCompare(b.innerText));
    for(var i = 0; i < foodArray.length; i++)
    {
        foodList[i].replaceWith(foodArray[i]);
    }
}

<div>q</div>
<div>w</div>
<div>e</div>
<div>r</div>
<div>t</div>
<div>y</div>
<div>u</div>
<div>i</div>
<div>o</div>
<div>p</div>
<div>a</div>
<div>s</div>
<div>d</div>
<div>f</div>
<button onclick="sortImages()">Clicky</button>

因为它是一个动态集合，所以没有显式的add操作，但从技术上讲，您可以扩展文档本身，尽管我认为这并不直观：检查i是否超过length，如果超过，则使用insertAdjacentElement()：
一个二个一个一个

赞(0）回复(0）举报 2023-03-11

uttx8gqw2#

你可以从getElementsByXy()方法中受益，然后你必须找到一种方法来移动这些元素，我记得Node.insertBefore()方法，它允许一种冒泡排序（我没有充分考虑它是否真的是冒泡排序）：

function doThing(){
  const inputs=document.getElementsByTagName("li");
  for(let i=0;i<inputs.length-1;i++) {
    const item=inputs[i];
    for(let j=i+1;j<inputs.length;j++){
      const jtem=inputs[j];
      if(item.firstChild.value>jtem.firstChild.value)
        item.parentNode.insertBefore(jtem,item);
    }
  }
}

<ul>
<li><input oninput="doThing()"></li>
<li><input oninput="doThing()"></li>
<li><input oninput="doThing()"></li>
<li><input oninput="doThing()"></li>
<li><input oninput="doThing()"></li>
<li><input oninput="doThing()"></li>
</ul>

现在我仔细研究了一下，有一个Element.insertAdjacentElement()，它不需要parentNode的丑陋，也允许after（这里没有使用）：
一个二个一个一个

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 按标题排序html集合

2条答案

相关问题

热门标签

最新问答