我有多个这样的 li 行
<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>我想按跨度类“Status_online”对所有 li 行进行排序。 这可能吗？
最佳答案
更新
您可以使用 closest() 的组合查找作为每个 .Status_online 祖先的每个 .Record_row。然后使用.each()在每个在线 .Record_row 上并使用 .before()将它们放置在第一个 .Record_row 之前。在代码片段中，请注意每个项目都维护其内容并按从最早到当前的顺序排列。
$(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>旧
您的标签之一是 jQuery UI，所以我假设您正在使用它。您可以使用 .sortable() 方法:
$('.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>关于javascript - 按类对 li 元素进行排序？ jQuery/Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37175232/