同位素根本没有正确排序

时间：2017-06-03 06:54:14

标签： javascript jquery sorting isotope

尝试根据服务器名称以升序和降序对服务器名称（在class =“name”中）进行简单排序。我已经尝试了一切。这是我的代码。

我想要做的是有一个方框列表（代表服务器），并且它具有可排序性和可过滤性。 Isotope承诺两者，但我不能让基本功能发挥作用。

我能做的最好的事情是根据其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>
	<title></title>
</head>
<body>
	<div class="list-group-gib grid" style="position: relative; height: 107px;">
		<div class="list-item-gib server_item element-item" data-guild="Function &amp; Arg" style="position: absolute; left: 428px; top: 0px;">
			<div class="name" style="display:none;">
				Function &amp; Arg
			</div>
			<div data-original-title="Function &amp; Arg" data-toggle="tooltip" title="">
				<a class="modal_server" data-guild="66192955777486848" data-name="Function &amp; Arg" data-toggle="modal">
				<div class="list-item-gib-icon" style="background:url(https://cdn.discordapp.com/icons/66192955777486848/8bfeb3237cd8697d1d1cd5c626ca8cea.jpg);"></div></a>
			</div>
		</div>
		<div class="list-item-gib server_item element-item" data-guild="Tatsumaki's Lounge" style="position: absolute; left: 321px; top: 0px;">
			<div class="name" style="display:none;">
				Tatsumaki's Lounge
			</div>
			<div data-original-title="Tatsumaki's Lounge" data-toggle="tooltip" title="">
				<a class="modal_server" data-guild="173184118492889089" data-name="Tatsumaki's Lounge" data-toggle="modal">
				<div class="list-item-gib-icon" style="background:url(https://cdn.discordapp.com/icons/173184118492889089/56acbf691c21289cb9de1ada5b4d6224.jpg);"></div></a>
			</div>
		</div>
		<div class="list-item-gib server_item element-item" data-guild="We Love Anime (WLA)" style="position: absolute; left: 214px; top: 0px;">
			<div class="name" style="display:none;">
				We Love Anime (WLA)
			</div>
			<div data-original-title="We Love Anime (WLA)" data-toggle="tooltip" title="">
				<a class="modal_server" data-guild="290843998296342529" data-name="We Love Anime (WLA)" data-toggle="modal">
				<div class="list-item-gib-icon" style="background:url(https://cdn.discordapp.com/icons/290843998296342529/f54027e439a1aa768184509c9ce661c5.jpg);"></div></a>
			</div>
		</div>
		<div class="list-item-gib server_item element-item" data-guild="test" style="position: absolute; left: 107px; top: 0px;">
			<div class="name" style="display:none;">
				test
			</div>
			<div data-original-title="test" data-toggle="tooltip" title="">
				<a class="modal_server" data-guild="305787617897873408" data-name="test" data-toggle="modal">
				<div class="no-pic-guild list-item-gib">
					<span>t</span>
				</div></a>
			</div>
		</div>
		<div class="list-item-gib server_item element-item" data-guild="test 2" style="position: absolute; left: 0px; top: 0px;">
			<div class="name" style="display:none;">
				test 2
			</div>
			<div data-original-title="test 2" data-toggle="tooltip" title="">
				<a class="modal_server" data-guild="306576359994425344" data-name="test 2" data-toggle="modal">
				<div class="no-pic-guild list-item-gib">
					<span>t2</span>
				</div></a>
			</div>
		</div>
	</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/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

你的脚本有效。你没有看到它排序的原因是因为你最初按字母顺序写了名字。我更改了最后两个项目，以便您可以看到它的实际效果。

运行脚本并单击名称button，您将看到它排序。

＆＃13;
＆＃13; 
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 });
});
＆＃13; 
.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);
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="list-group-gib grid" style="position: relative; height: 107px;">
		<div class="list-item-gib server_item element-item" data-guild="Function &amp; Arg" style="position: absolute; left: 428px; top: 0px;">
			<div class="name" style="display:none;">
				Function &amp; Arg
			</div>
			<div data-original-title="Function &amp; Arg" data-toggle="tooltip" title="">
				<a class="modal_server" data-guild="66192955777486848" data-name="Function &amp; Arg" data-toggle="modal">
				<div class="list-item-gib-icon" style="background:url(https://cdn.discordapp.com/icons/66192955777486848/8bfeb3237cd8697d1d1cd5c626ca8cea.jpg);"></div></a>
			</div>
		</div>
		<div class="list-item-gib server_item element-item" data-guild="Tatsumaki's Lounge" style="position: absolute; left: 321px; top: 0px;">
			<div class="name" style="display:none;">
				Tatsumaki's Lounge
			</div>
			<div data-original-title="Tatsumaki's Lounge" data-toggle="tooltip" title="">
				<a class="modal_server" data-guild="173184118492889089" data-name="Tatsumaki's Lounge" data-toggle="modal">
				<div class="list-item-gib-icon" style="background:url(https://cdn.discordapp.com/icons/173184118492889089/56acbf691c21289cb9de1ada5b4d6224.jpg);"></div></a>
			</div>
		</div>
		<div class="list-item-gib server_item element-item" data-guild="We Love Anime (WLA)" style="position: absolute; left: 214px; top: 0px;">
			<div class="name" style="display:none;">
				We Love Anime (WLA)
			</div>
			<div data-original-title="We Love Anime (WLA)" data-toggle="tooltip" title="">
				<a class="modal_server" data-guild="290843998296342529" data-name="We Love Anime (WLA)" data-toggle="modal">
				<div class="list-item-gib-icon" style="background:url(https://cdn.discordapp.com/icons/290843998296342529/f54027e439a1aa768184509c9ce661c5.jpg);"></div></a>
			</div>
		</div>
		<div class="list-item-gib server_item element-item" data-guild="test" style="position: absolute; left: 107px; top: 0px;">
			<div class="name">
				BANANAS
			</div>
			<div data-original-title="test" data-toggle="tooltip" title="">
				<a class="modal_server" data-guild="305787617897873408" data-name="test" data-toggle="modal">
				<div class="no-pic-guild list-item-gib">
					<span>t</span>
				</div></a>
			</div>
		</div>
		<div class="list-item-gib server_item element-item" data-guild="test 2" style="position: absolute; left: 0px; top: 0px;">
			<div class="name">
				APPLES
			</div>
			<div data-original-title="test 2" data-toggle="tooltip" title="">
				<a class="modal_server" data-guild="306576359994425344" data-name="test 2" data-toggle="modal">
				<div class="no-pic-guild list-item-gib">
					<span>t2</span>
				</div></a>
			</div>
		</div>
	</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/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题