我打算让这段代码做什么:
反而会发生什么:
该列表在我的笔记本电脑上按字母顺序排列,但不在我的iPhone上。我还必须更改JavaScript中的条件,因为代码保持默认为else的情况。我并没有完全理解if语句的作用,所以如果有人能解释一下,我会非常感激。
JavaScript的:
$(document).ready(function (e) {
var $sort = this;
var $list = $('div.dropdown-content');
var $listLi = $('a', $list);
$listLi.sort(function (a, b) {
var keyA = $(a).text();
var keyB = $(b).text();
if ($($sort).hasClass('asc')) {
return (keyA > keyB) ? 1 : 0;
} else {
return (keyA > keyB) ? 1 : 0;
}
});
$.each($listLi, function (index, row) {
$list.append(row);
});
});
HTML(相关区域):
<!DOCTYPE html>
<head>
<title>GeoMaps</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<ul class="nav">
<li class="nav navhome">
<a href="">
<h3 style="display:inline">GeoMaps</h3>
<h6 style="display:inline">for use with AP® Human Geography</h6>
</a>
</li>
<li class="nav" style="float:right"><a href="#maps">About</a></li>
<li class="dropdown" style="float:right">
<a href="javascript:void(0)" class="dropbtn">Maps</a>
<div class="dropdown-content">
<!--This list will be automatically alphabetized by JS-->
<a href="#">East Asia</a>
<a href="#">Oceania</a>
<a href="#">Russia</a>
<a href="#">Europe</a>
<a href="#">South Asia</a>
<a href="#">Southeast Asia</a>
</div>
</li>
</ul>
这个网站托管在GitHub页面上,如果它有所作为。
答案 0 :(得分:1)
按.textContent
元素的a
的第一个字符排序
$(function() {
var $list = $("div.dropdown-content");
$list.html(
$("a", $list).sort(function(a, b) {
return b.textContent[0] < a.textContent[0]
})
);
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul>
<li class="dropdown" style="float:right">
<a href="javascript:void(0)" class="dropbtn">Maps</a>
<div class="dropdown-content">
<!--This list should be automatically alphabetized by JS-->
<a href="#">East Asia</a>
<a href="#">Oceania</a>
<a href="#">Russia</a>
<a href="#">Europe</a>
<a href="#">South Asia</a>
<a href="#">Southeast Asia</a>
</div>
</li>
</ul>
&#13;