草庐IT

JavaScript/CSS 列表排序功能

runoob 2023-03-28 原文

本章节我们将学习如何使用 JS/CSS 实现列表排序功能。

先看下效果如下，点击按钮实现排序：

基础 HTML 代码

实例

<ul id="id01">
  <li>Runoob</li>
  <li>Google</li>
  <li>Taobao</li>
  <li>Zhihu</li>
  <li>Baidu</li>
  <li>Weibo</li>
</ul>
 
<script>
function sortList() { var list, i, switching, b, shouldSwitch; list = document.getElementById("id01"); switching = true; /* 设置一个循环语句 */ while (switching) { // 设置循环结束标记 switching = false; b = list.getElementsByTagName("LI"); // 循环列表 for (i = 0; i < (b.length - 1); i++) { // 设置元素是否调换位置 shouldSwitch = false; /* 判断是否将下一个元素与当前元素进行切换 */ if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) { /* 两个元素按字母的顺序比较，如果下一个元素的字母小于当前元素，设置调换元素标记，并结束当前循环*/ shouldSwitch = true; break; } } if (shouldSwitch) { /* 如果元素调换位置设置为 true，则进行对调操作 */ b[i].parentNode.insertBefore(b[i + 1], b[i]); switching = true; } } }
</script>

尝试一下 »

升序或降序排列

第一次单击按钮时，排序方向为升序（A 到 Z）。

再次点击，排序方向为降序（Z 到 A）。

先看下效果如下，点击按钮实现排序：

实例

<ul id="id01">
  <li>Runoob</li>
  <li>Google</li>
  <li>Taobao</li>
  <li>Zhihu</li>
  <li>Baidu</li>
  <li>Weibo</li>
</ul>
 
<script>
function sortListDir() { var list, i, switching, b, shouldSwitch, dir, switchcount = 0; list = document.getElementById("id01"); switching = true; // 设置升序排列 dir = "asc"; // 设置一个循环语句 while (switching) { // 设置循环结束标记 switching = false; b = list.getElementsByTagName("LI"); // 循环列表 for (i = 0; i < (b.length - 1); i++) { // 设置元素是否调换位置 shouldSwitch = false; /* 判断是否将下一个元素与当前元素进行切换 (asc 或 desc): */ if (dir == "asc") { if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) { /*两个元素按字母的顺序比较，如果下一个元素的字母小于当前元素，设置调换元素标记，并结束当前循环 */ shouldSwitch = true; break; } } else if (dir == "desc") { if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) { /* 两个元素按字母的顺序比较，如果下一个元素的字母小于当前元素，设置调换元素标记，并结束当前循环*/ shouldSwitch= true; break; } } } if (shouldSwitch) { /* 如果元素调换位置设置为 true，则进行对调操作 */ b[i].parentNode.insertBefore(b[i + 1], b[i]); switching = true; // 每次对调完成时，将 switchcount 增加 1 switchcount ++; } else { /* 如果完成所有元素的排序且 direction 设置为 "asc",这时就将 direction 设置为 "desc" 并再次执行循环 */ if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } }
</script>

尝试一下 »

数字排序

实例

if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
  shouldSwitch =  true;
  break;
}

尝试一下 »
JavaScriptCSSspanclasshl

有关JavaScript/CSS 列表排序功能的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby - RVM 使用列表[0] - 2

    是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论

  3. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能？ - 2

    只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您

  4. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  5. ruby-on-rails - 需要帮助最大化多个相似对象中的 3 个因素并适当排序 - 2

    我需要用任何语言编写一个算法，根据3个因素对数组进行排序。我以度假村为例(如Hipmunk)。假设我想去度假。我想要最便宜的地方、最好的评论和最多的景点。但是，显然我找不到在所有3个中都排名第一的方法。Example(assumingthereare20importantattractions):ResortA:$150/night...98/100infavorablereviews...18of20attractionsResortB:$99/night...85/100infavorablereviews...12of20attractionsResortC:$120/night

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  8. ruby-on-rails - 在具有 ActiveRecord 条件的相关模型中按字段排序 - 2

    我正在尝试按Rails相关模型中的字段进行排序。我研究的所有解决方案都没有解决如果相关模型被另一个参数过滤？元素模型classItem相关模型:classPriority我正在使用where子句检索项目:@items=Item.where('company_id=?andapproved=?',@company.id,true).all我需要按相关表格中的“位置”列进行排序。问题在于，在优先级模型中，一个项目可能会被多家公司列出。因此，这些职位取决于他们拥有的company_id。当我显示项目时，它是针对一个公司的，按公司内的职位排序。完成此任务的正确方法是什么？感谢您的帮助。PS-我

  9. ruby - 按数字(从大到大)然后按字母(字母顺序)对对象集合进行排序 - 2

    我正在构建一个小部件来显示奥运会的奖牌数。我有一个“国家”对象的集合，其中每个对象都有一个“名称”属性，以及奖牌计数的“金”、“银”、“铜”。列表应该排序:1.首先是奖牌总数2.如果奖牌相同，按类型分割(金>银>铜，即2金>1金+1银)3.如果奖牌和类型相同，则按字母顺序子排序我正在用ruby​​做这件事，但我想语言并不重要。我确实找到了一个解决方案，但如果感觉必须有更优雅的方法来实现它。这是我做的:使用加权奖牌总数创建一个虚拟属性。因此，如果他们有2个金牌和1个银牌，加权总数将为“3.020100”。1金1银1铜为“3.010101”由于我们希望将奖牌数排序为最高的，因此列表按降序排

  10. ruby-on-rails - rails 功能测试 - 2

    在Rails自动生成的功能测试(test/functional/products_controller_test.rb)中，我看到以下代码:classProductsControllerTest我的问题是:方法调用products()在哪里/如何定义？products(:one)到底是什么意思？看代码，大概意思是“创建一个产品”，但是它是如何工作的呢？注意我是Ruby/Rails的新手，如果这些是微不足道的问题，我深表歉意。 最佳答案 如果您查看test/fixtures文件夹，您会看到一个products.yml文件。这是在您创建

随机推荐