javascript - 基于 CSS 类和文本的排序元素不起作用

Question

我正在尝试重新组织一些由服务器端代码创建的信息。服务器内存不足，所有排序和显示都需要在客户端使用 javascript/jquery 处理。 html 是沿着...

<div>
    <a href="https://en.wikipedia.org" class="AccessSitesLinks true 1">Wikipedia Home</a>
    <a href="https://en.wikipedia.org/wiki/Gold" class="AccessSitesLinks false 1">Wikipedia Gold</a>
    <a href="https://google.com" class="AccessSitesLinks true 2">Google Home</a>
    <a href="https://mail.google.com/" class="AccessSitesLinks false 2">Google Mail</a>
    <a href="https://en.wikipedia.org/wiki/Mushroom" class="AccessSitesLinks false 1">Wikipedia Mushrooms</a>
    <a href="https://facebook.com" class="AccessSitesLinks true 3">FaceBook Home</a>
    <a href="https://facebook.org/about" class="AccessSitesLinks false 3">FaceBook About</a>
</div>

这是我正在制作的 fiddle https://jsfiddle.net/ydc6ywuz/1/ 总体目标是将 AccessSitesLinks true 排序为根站点。这意味着任何 false 的 css 类都应该根据 false 之后的数字附加到根站点。最好的例子是维基百科主页是 true 和 1，像蘑菇和黄金这样的网站将是 false 和 1。

这不是我的问题所在。当我运行这段 Javascript 代码时。这种排序非常有效。但 href 值保持不变。尽管它们在 Console.log 部分是正确的。

    function setFields() {
    var sortSite = $('.AccessSitesLinks.true');
    var arr = sortSite.map(function(_, o) {
        return {
          t: $(o).text(),
          h: $(o).attr('href'),
          c: $(o).attr('class')
        };
      }).get();
      arr.sort(function(o1, o2) {
            return o1.t > o2.t ? 1 : o1.t <o2.t ? -1: 0;
      });

      sortSite.each(function(i, o) {
        console.log(i);
        $(o).text(arr[i].t);
        $(o).attr(arr[i].h);
        $(o).attr(arr[i].c);
        console.log(arr[i].h);
        console.log(arr[i].c);
      });

编辑:我尝试做 $(o).attr('href') = arr[i].h; 但这没有用 Uncaught ReferenceError: invalid lef-hand side in assignment

Answer 1

这些行是问题所在:

    $(o).attr(arr[i].h);
    $(o).attr(arr[i].c);

您需要提供属性名称:

    $(o).attr("href", arr[i].h);
    $(o).attr("class", arr[i].c);