CODEWITHSUNDEEP
javascriptjqueryhtmlcsssorting
christopher clark
christopher clark

Reputation: 2103

Sorting Elements Based on CSS Class and Text not working

I am trying to reorganize some information that is created by server-side code. The server is strapped for memory, and all sorting and displaying will need to be handled client-side with javascript/jquery. The html is along the lines of...

<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 progress https://jsfiddle.net/ydc6ywuz/1/ The overall goal is to sort AccessSitesLinks true to be the root sites. Meaning any css class that is false should be appended to the root site based on the number after false. The best example is Wikipedia Home is true and 1, sites like mushrooms and gold would be false and 1.

This is not where my issue is. When I run this Javascript code. The sort works perfectly. but the href values remain the same. Despite them being correct in the Console.log portion.

    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 this did not work Uncaught ReferenceError: invalid lef-hand side in assignment

Upvotes: 7

Views: 629

Answers (1)

Pointy
Pointy

Reputation: 413737

These lines are the problem:

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

You need to provide the attribute names:

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

Upvotes: 7

Related Questions