0

I have a list of names inside li tag and I would like to sort them by clicking external link/button/text(anything). I searched for this type of examples but not succeed.

Is this possible to make? I am not good enough in js or jquery to make something like this. If this is possible that will be very helpful for my project.

jsfiddle link : JS Fiddle

You can Add anything to accomplish the functionality.

HTML

<p>Click me to Sort</p>


<ul>
    <li> Key Roles and Functions</li>
    <li> Leadership Clarity</li>
    <li> Margin</li>
    <li> Market Differentiation</li>
    <li> Market Maturity</li>
    <li> Maturity</li>
    <li> Mission</li>
    <li> Vision</li>
    <li> Objectives</li>
    <li> Operational Efficiency</li>
    <li> Outlet Characteristics</li>
    <li> Overall Measurements</li>
    <li> Overall Performance</li>
    <li> Overall Systems</li>
    <li> Pain Points</li>
    <li> Performance</li>
    <li> Positive Culture</li>
    <li> Price Optimization</li>
    <li> Promotion Strategy</li>
    <li> Sales Model</li>
    <li> Stickiness</li>
</ul>

CSS

    ul{
    list-style-type:none;
    width:200px;
    background:#bdbdbd;
}
S Raihan
  • 377
  • 2
  • 9
  • 18

1 Answers1

2

Try this:

HTML:

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@1.9.1" data-semver="1.9.1" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <p>Click me to Sort</p>
  <ul>
    <li>Mission</li>
    <li>Vision</li>
    <li>Objectives</li>
  </ul>
</body>

</html>

JavaScript: 

$(function() {
  $('p').click(function() {

    var list = $('ul');
    var listitems = list.children('li').get();
    listitems.sort(function(e1, e2) {
      return $(e1).text().toUpperCase().localeCompare($(e2).text().toUpperCase());
    })

    $.each(listitems, function(idx, itm) {
      list.append(itm);
    });

  });
});

CSS:

ul {
  list-style-type: none;
  width: 200px;
  background: #bdbdbd;
}

Plunker example

UPDATE: (answer for comment) To sort and unsort you should modify JavaScript:

$(function() {
  var noSortedTxts = [];
  var sortedTxts = [];
  var sort = true;

  $('p').click(function() {

    var list = $('ul');
    if (noSortedTxts.length === 0) {
      var listitems = list.children('li').get();

      $.each(listitems, function(idx, itm) {
        noSortedTxts.push($(itm).text());
      });

      sortedTxts = noSortedTxts.slice(0);
      sortedTxts.sort(function(t1, t2) {
        return t1.toUpperCase().localeCompare(t2.toUpperCase());
      });
    }

    if (sort) {
      list.empty();
      $.each(sortedTxts, function(idx, txt) {
        list.append('<li>' + txt + '</li>');
      });
      sort = false;
    } else {
      list.empty();
      $.each(noSortedTxts, function(idx, txt) {
        list.append('<li>' + txt + '</li>');
      });
      sort = true;
    }

  });
});

Plunker example

lukpaw
  • 1,603
  • 2
  • 26
  • 31