Advertisement

Sorting li elements by class? jQuery / Javascript

html javascript jquery jquery-ui sorting

AliNajafZadeh

edited 27 Aug, 2022

Nippledisaster

asked 12 May, 2016

I have multiple li rows like this

 <ol class="DataList_row"> 

        <li class="Record_row">
            <div class="Item_main">
                <a href="#" class="arrow_box">
                    <div class="status">
                        <span class="Status_offline"><i class="fa fa-circle"></i></span>
                    </div>
                </a>
            </div>
        </li>
        <li class="Record_row">
            <div class="Item_main">
                <a href="#" class="arrow_box">
                    <div class="status">
                        <span class="Status_online"><i class="fa fa-circle"></i></span>
                    </div>
                </a>
            </div>
        </li>  

    </ol>

I want to sort all the li rows by the span class “Status_online”. is this possible?

Advertisement

Answer

UPDATE

You can use a combination of closest() to find the each .Record_row that is an ancestor of each .Status_online. Then use .each() on each online .Record_row and use .before() to place them before the first .Record_row. In the Snippet notice that each item maintains it’s content and ordered from the earliest to the current.

$(function() {
  var online = $('.Status_online').closest('.Record_row');
  var first = $('.Record_row')[0];
  online.each(function() {
    $(first).before(this);
  });
});

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Sort</title>
</head>

<body>
  <ol class="DataList_row">

    <li class="Record_row">
      <div class="Item_main">
        <a href="#" class="arrow_box">
          <div class="status">
            <span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE1</span>
          </div>
        </a>
      </div>
    </li>

    <li class="Record_row">
      <div class="Item_main">
        <a href="#" class="arrow_box">
          <div class="status">
            <span class="Status_online"><i class="fa fa-circle"></i>ONLINE1</span>
          </div>
        </a>
      </div>
    </li>

    <li class="Record_row">
      <div class="Item_main">
        <a href="#" class="arrow_box">
          <div class="status">
            <span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE2</span>
          </div>
        </a>
      </div>
    </li>
    <li class="Record_row">
      <div class="Item_main">
        <a href="#" class="arrow_box">
          <div class="status">
            <span class="Status_online"><i class="fa fa-circle"></i>ONLINE2</span>
          </div>
        </a>
      </div>
    </li>

    <li class="Record_row">
      <div class="Item_main">
        <a href="#" class="arrow_box">
          <div class="status">
            <span class="Status_online"><i class="fa fa-circle"></i>ONLINE3</span>
          </div>
        </a>
      </div>
    </li>

    <li class="Record_row">
      <div class="Item_main">
        <a href="#" class="arrow_box">
          <div class="status">
            <span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE3</span>
          </div>
        </a>
      </div>
    </li>

    <li class="Record_row">
      <div class="Item_main">
        <a href="#" class="arrow_box">
          <div class="status">
            <span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE4</span>
          </div>
        </a>
      </div>
    </li>

    <li class="Record_row">
      <div class="Item_main">
        <a href="#" class="arrow_box">
          <div class="status">
            <span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE5</span>
          </div>
        </a>
      </div>
    </li>

    <li class="Record_row">
      <div class="Item_main">
        <a href="#" class="arrow_box">
          <div class="status">
            <span class="Status_online"><i class="fa fa-circle"></i>ONLINE4</span>
          </div>
        </a>
      </div>
    </li>

  </ol>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  <script>
    $(function() {
      var online = $('.Status_online').closest('.Record_row');
      var first = $('.Record_row')[0];
      online.each(function() {
        $(first).before(this);
      });
    });
  </script>
</body>

</html>

OLD

One of your tags is jQuery UI so I’m assuming that you are using it. You can you .sortable() method:

$('.DataList_row').sortable();

This is drag and drop, and I posted before you had commented further details of your need for this sorting to be dynamic…So standby…

SNIPPET

$('.DataList_row').sortable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.6.2/css/font-awesome.min.css">

<ol class="DataList_row"> 

    <li class="Record_row">
        <div class="Item_main">
            <a href="#" class="arrow_box">
                <div class="status">
                    <span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE</span>
                </div>
            </a>
        </div>
    </li>

    <li class="Record_row">
        <div class="Item_main">
            <a href="#" class="arrow_box">
                <div class="status">
                    <span class="Status_online"><i class="fa fa-circle"></i>ONLINE</span>
                </div>
            </a>
        </div>
    </li>  

</ol>

Advertisement