JavaScript& JQuery没有在某些设备上按字母顺序排列

时间:2017-02-03 04:11:54

标签: javascript jquery html

我打算让这段代码做什么:

  • 按字母顺序排列列表(来自A-> Z)

反而会发生什么:

该列表在我的笔记本电脑上按字母顺序排列,但不在我的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页面上,如果它有所作为。

1 个答案:

答案 0 :(得分:1)

.textContent元素的a的第一个字符排序

&#13;
&#13;
$(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;
&#13;
&#13;