Sorting elements based on CSS class and text does not work

Question

I am trying to reorganize some information generated using server-side code. The server is memory bound, and all sorting and display should be handled on the client side using javascript / jquery. The html is along the lines ...

<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> 

Here is my fiddle in the process https://jsfiddle.net/ydc6ywuz/1/ The overall goal is to sort AccessSitesLinks true as root sites. The value of any css class that false should be added to the root site based on the number after false . The best example is Wikipedia Home true and 1 , sites like mushrooms and gold will be false and 1 .

It's not my problem. When I run this javascript code. The variety works great. but the href values ​​remain unchanged. Although they are correct in the Console.log section.

  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); }); 

Edit: I tried doing $(o).attr('href') = arr[i].h; but it didn’t work. Do not open ReferenceError: invalid left edge side in assignment

Answer 1

These lines are the problem:

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

You need to specify attribute names:

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