按类排序li元素？ jQuery / Javascript

时间：2016-05-12 00:12:15

标签： javascript jquery html sorting jquery-ui

我有多个这样的li行

https://i.ytimg.com/vi/8xjfdGErgUc/maxresdefault.jpg
https://i.ytimg.com/vi/9xber0p1bTw/maxresdefault.jpg
https://yt3.ggpht.com/-fG6iPki4sFY/AAAAAAAAAAI/AAAAAAAAAAA/2Sbu6OjrBik/s900-c-k-no-rj-c0xffffff/photo.jpg
https://yt3.ggpht.com/-YZyzwE3a30c/AAAAAAAAAAI/AAAAAAAAAAA/16qPbHiYJmc/s900-c-k-no-rj-c0xffffff/photo.jpg
https://yt3.ggpht.com/-EYlRar9RsEY/AAAAAAAAAAI/AAAAAAAAAAA/JPQTc68e_x4/s900-c-k-no-rj-c0xffffff/photo.jpg
https://i.ytimg.com/vi/VttZwjV38H0/maxresdefault.jpg
https://yt3.ggpht.com/-7qUTA41fVxA/AAAAAAAAAAI/AAAAAAAAAAA/ZtK1pGLa4vw/s900-c-k-no-rj-c0xffffff/photo.jpg
https://i.ytimg.com/vi/KfQBdRcgizc/maxresdefault.jpg
https://yt3.ggpht.com/-VGI9T-Sm5xg/AAAAAAAAAAI/AAAAAAAAAAA/AtC93A0H3AQ/s900-c-k-no-rj-c0xffffff/photo.jpg
https://i.ytimg.com/vi/aRkceYdlkTo/maxresdefault.jpg

我想按span类“Status_online”对所有li行进行排序。 这可能吗？

2 个答案:

答案 0 :(得分：1)

更新

您可以使用closest()的组合来查找每个.Record_row的祖先.Status_online。.Record_row。然后在每个在线.Record_row上使用.each()，并使用.before()将它们放在第一个$(function() { var online = $('.Status_online').closest('.Record_row'); var first = $('.Record_row')[0]; online.each(function() { $(first).before(this); }); }); 之前。在代码段注释中，每个项目都保持其内容，并从最早到现在进行排序。

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

段

.sortable()

<小时/>

OLD

你的一个标签是jQuery UI，所以我假设你正在使用它。你可以$('.DataList_row').sortable(); 方法：

$('.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>
number_of_people = 15 

Puts "There are #{number_of_people} scheduled tonight"

答案 1 :(得分：1)

<!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 olElement = $('.DataList_row');
var sortedAttributes = $('.status span').map(function() { return $(this).text(); }).sort(); //This returns all the class statuses
console.log(sortedAttributes);
olElement.empty(); //Remove all li elements
var liHtml = '';
$(sortedAttributes).each(function(idx, cl){
var clClass = cl.startsWith('ONLINE')?'online':'offline'
liHtml += '<li class="Record_row"><div class="Item_main"><a href="#" class="arrow_box"><div class="status"><span class="Status_' + clClass + '"><i class="fa fa-circle"></i>' + cl + '</span></div></a></div></li>';
});
olElement.append(liHtml); //Re-add all the elements that are sorted.
    });
  </script>
</body>

</html>

以下是如何做到这一点：

var olElement = $('.DataList_Row');
var sortedAttributes = $('.status span').map(function() { return $(this).text(); }).sort(); //This returns all the class statuses

olElement.empty(); //Remove all li elements
var liHtml = ''; 
$(sortedAttributes).each(function(idx, cl){
    liHtml += '<li class="Record_row"><div class="Item_main"><a href="#" class="arrow_box"><div class="status"><span class="Status_' + cl.toLowerCase() + '"><i class="fa fa-circle"></i>' + cl + '</span></div></a></div></li>'; 
});
olElement.append(liHtml); //Re-add all the elements that are sorted.
相关问题
最新问题