0
試圖根據服務器的名稱按升序和降序對服務器的名稱（在class =「name」中）進行簡單的排序。我已經嘗試了一切。這是我的代碼。同位素排序不正確
我想要做的是有一個框（代表服務器）的列表，並有它可排序和過濾。同位素承諾兩個，但我不能得到基本功能的工作。
我能做的最好的事情就是根據它的html元素順序排序。我無法通過服務器的「名稱」進行排序。
我使用他們的GitHub上的最新的同位素和jQuery 2.2.1
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name'
}
});
// bind sort button click
$('.sort-by-button-group').on('click', 'button', function() {
var sortValue = $(this).attr('data-sort-value');
console.log(sortValue);
$grid.isotope({ sortBy: sortValue });
});.list-item-gib-icon {
width: 84px;
height: 84px;
border-radius: 18px;
box-shadow: inset 0px 0px 10px rgba(17, 17, 17, 0.3);
background-size: cover !important;
background-position: 50% 50% !important;
}
gib.css:24
.list-item-gib {
width: 84px;
height: 84px;
float: left;
margin: 0px 23px 23px 0px;
background: #3e3e3e;
padding: 0px;
list-style-type: none;
border-radius: 20px;
box-shadow: inset 0px 0px 10px #111;
position: relative;
}
.no-pic-guild span {
line-height: 84px;
width: 84px;
text-align: center;
display: inline-block;
color: #fff;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 0px 31px rgba(255, 255, 255, 0.64);
}<!DOCTYPE html>
<html>
<head>
\t <title></title>
</head>
<body>
\t <div class="list-group-gib grid" style="position: relative; height: 107px;">
\t \t <div class="list-item-gib server_item element-item" data-guild="Function & Arg" style="position: absolute; left: 428px; top: 0px;">
\t \t \t <div class="name" style="display:none;">
\t \t \t \t Function & Arg
\t \t \t </div>
\t \t \t <div data-original-title="Function & Arg" data-toggle="tooltip" title="">
\t \t \t \t <a class="modal_server" data-guild="66192955777486848" data-name="Function & Arg" data-toggle="modal">
\t \t \t \t <div class="list-item-gib-icon" style="background:url(https://cdn.discordapp.com/icons/66192955777486848/8bfeb3237cd8697d1d1cd5c626ca8cea.jpg);"></div></a>
\t \t \t </div>
\t \t </div>
\t \t <div class="list-item-gib server_item element-item" data-guild="Tatsumaki's Lounge" style="position: absolute; left: 321px; top: 0px;">
\t \t \t <div class="name" style="display:none;">
\t \t \t \t Tatsumaki's Lounge
\t \t \t </div>
\t \t \t <div data-original-title="Tatsumaki's Lounge" data-toggle="tooltip" title="">
\t \t \t \t <a class="modal_server" data-guild="173184118492889089" data-name="Tatsumaki's Lounge" data-toggle="modal">
\t \t \t \t <div class="list-item-gib-icon" style="background:url(https://cdn.discordapp.com/icons/173184118492889089/56acbf691c21289cb9de1ada5b4d6224.jpg);"></div></a>
\t \t \t </div>
\t \t </div>
\t \t <div class="list-item-gib server_item element-item" data-guild="We Love Anime (WLA)" style="position: absolute; left: 214px; top: 0px;">
\t \t \t <div class="name" style="display:none;">
\t \t \t \t We Love Anime (WLA)
\t \t \t </div>
\t \t \t <div data-original-title="We Love Anime (WLA)" data-toggle="tooltip" title="">
\t \t \t \t <a class="modal_server" data-guild="290843998296342529" data-name="We Love Anime (WLA)" data-toggle="modal">
\t \t \t \t <div class="list-item-gib-icon" style="background:url(https://cdn.discordapp.com/icons/290843998296342529/f54027e439a1aa768184509c9ce661c5.jpg);"></div></a>
\t \t \t </div>
\t \t </div>
\t \t <div class="list-item-gib server_item element-item" data-guild="test" style="position: absolute; left: 107px; top: 0px;">
\t \t \t <div class="name" style="display:none;">
\t \t \t \t test
\t \t \t </div>
\t \t \t <div data-original-title="test" data-toggle="tooltip" title="">
\t \t \t \t <a class="modal_server" data-guild="305787617897873408" data-name="test" data-toggle="modal">
\t \t \t \t <div class="no-pic-guild list-item-gib">
\t \t \t \t \t <span>t</span>
\t \t \t \t </div></a>
\t \t \t </div>
\t \t </div>
\t \t <div class="list-item-gib server_item element-item" data-guild="test 2" style="position: absolute; left: 0px; top: 0px;">
\t \t \t <div class="name" style="display:none;">
\t \t \t \t test 2
\t \t \t </div>
\t \t \t <div data-original-title="test 2" data-toggle="tooltip" title="">
\t \t \t \t <a class="modal_server" data-guild="306576359994425344" data-name="test 2" data-toggle="modal">
\t \t \t \t <div class="no-pic-guild list-item-gib">
\t \t \t \t \t <span>t2</span>
\t \t \t \t </div></a>
\t \t \t </div>
\t \t </div>
\t </div>
<div class="button-group sort-by-button-group"><button class="button is-checked" data-sort-value="original-order">original order</button><button class="button" data-sort-value="name">name</button></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>
</body>
</html>