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

chr*_*ark 7 html javascript css sorting jquery

我试图重新组织由服务器端代码创建的一些信息.服务器绑定内存,所有排序和显示将需要使用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>
Run Code Online (Sandbox Code Playgroud)

这是我的进步小提琴https://jsfiddle.net/ydc6ywuz/1/ 总体目标是排序AccessSitesLinks true为根网站.这意味着任何false应该根据后面的数字附加到根网站的css类false.最好的例子就是维基百科的首页是true1,像蘑菇和黄金地点将是false1.

这不是我的问题所在.当我运行这个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);
      });
Run Code Online (Sandbox Code Playgroud)

编辑:我尝试过$(o).attr('href') = arr[i].h;但这不起作用Uncaught ReferenceError:无效的lef-hand side in assignment

Poi*_*nty 7

这些行是问题:

    $(o).attr(arr[i].h);
    $(o).attr(arr[i].c);
Run Code Online (Sandbox Code Playgroud)

您需要提供属性名称:

    $(o).attr("href", arr[i].h);
    $(o).attr("class", arr[i].c);
Run Code Online (Sandbox Code Playgroud)

  • @PraveenKumar它总是超级简单的像这样:) (3认同)
  • @Pointy:是的 为那些花费45分钟进行深度技术解释的人做好准备,这些解释最终被接受(这很好,意味着它有助于OP)并且所有两个人都理解这项技术足以支持.:-)而且我知道你写过这些,也是为了享受这些. (3认同)