jQuery 根据类重新排序列表项

2023-11-26

有没有一种简单的方法可以使用类重新排序我的列表项?

我想指定一个类来首先显示列表顶部的这些项目,然后列出下面的其他列表项目。

<ul class="order-me">
    <li class="">normal content</li>
    <li class="">normal content</li>
    <li class="featured">featured content</li>
    <li class="">normal content</li>
    <li class="featured">featured content</li>
    <li class="">normal content</li>
    <li class="">normal content</li>
</ul>

期望的输出:

<ul class="order-me">
    <li class="featured">featured content</li>
    <li class="featured">featured content</li>
    <li class="">normal content</li>
    <li class="">normal content</li>
    <li class="">normal content</li>
    <li class="">normal content</li>
    <li class="">normal content</li>
</ul>

Thanks!


您可以在前面添加.featured元素到其包含ul将它们移至列表顶部。尝试这个:

$('.featured').prependTo('.order-me');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="order-me">
  <li class="">normal content</li>
  <li class="">normal content</li>
  <li class="featured">featured content</li>
  <li class="">normal content</li>
  <li class="featured">featured content</li>
  <li class="">normal content</li>
  <li class="">normal content</li>
</ul>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery 根据类重新排序列表项 的相关文章

  • 我可以在 .split() 之后直接访问数组的第二个值吗?

    我有这个代码 var tmp this attr id split 我想将分割后的第二个值存储在 tmp 上 因此 如果 this attr id hello marco 我想在 tmp 中存储值 marco 而不是数组 当然 我想直接用一
  • 多个列表和大小的所有可能排列

    在 python 中使用以下命令很容易计算简单的排列itertools permutations https docs python org 3 library itertools html itertools permutations 你
  • 获取列表框中选定值的列表

    已经有一个问题得到了大量的投票 要求使用 jQuery 从下拉列表中获取选定的值here https stackoverflow com questions 1643227 get selected text from drop down
  • 如何根据上一张或下一张幻灯片按键更改 Nivo Slider 中的效果?

    我想根据按下的按钮更改 Nivo Slider 上的过渡效果 关于如何实现这一目标有什么想法吗 Update澄清一下 我指的是下一个或上一个按钮 而不是键盘上的按钮 我正在寻找的是 如果一个人按下下一个按钮 则会调用 slipToRight
  • 角度分割列表

    我有一个看起来像这样的列表 A B C 是否有任何简单的方法 而无需创建一个函数 将其展平为一个看起来像这样的数组 A B C 我搜索了 SO 但没有找到任何带有打字稿方法的内容 Thanks 编辑 A B C 是相同类型 看来您正在寻找的
  • 如何在 Firefox 插件上使用 jQuery 1.5.2+?

    首先 我创建了一个接收参数并返回 jQuery 的函数 例如 function getjQuery window jquery code window return window jQuery 但后来我收到了一封评论电子邮件 他们告诉我必须
  • 使用 JQuery 闪烁图像

    是否可以使用 JQuery 使图像闪烁 我需要闪烁具有特定类别的某些图像 它应该在 IE 和 Firefox 中都可以工作 像这样的事情 function blink time interval var timer window setIn
  • 使用 JavaScript 中的 mousemove 事件在画布内的图像上绘制矩形

    我正在尝试使用 mousemove event 在画布内的图像上绘制一个矩形 但由于clearRect 我在图像上得到了矩形 并且矩形中填充了颜色 谁能帮我解答一下 如何在图像上绘制一个只有边框的矩形 下面是我实现它所遵循的代码 var c
  • jqGrid:结合 sortableRows 和 gridDnD (重复行)

    我希望能够将项目从 Grid1 拖动到 Grid2 然后允许用户对 Grid2 的项目进行排序 单独来看 sortableRows 选项和gridDnd 选项可以正常工作 当两个集成一起使用并且用户对 Grid2 中的行进行排序时 这些行将
  • Jquery检查元素是否存在然后将类添加到不同的元素

    我对 jquery 不太了解 所以请忍受我的无知 但我很确定我可以用 jquery 完成这个任务 我需要 jquery 来检查某个元素是否存在 如果存在 则将一个类添加到另一个元素 例如 如果存在 最低价格链接 类 则向 常规价格 添加一个
  • Jqgrid - window.bind 事件不允许在 IE8 中调整列大小

    对于 IE8 中的 Jqgrid 当我将调整大小事件绑定到窗口时 列调整大小不起作用 当我单击要调整大小的列时 它显示调整大小标志但不执行任何操作 我目前使用的是jqgrid 4 4 1版本 当我使用4 1 2相同的代码时没有遇到这个问题
  • Opera Mobile 不允许 jQuery 点击

    我一直在测试基础 CSS 框架 并且非常喜欢该框架提供的自定义表单元素 我建了一个页面 http eventgrapple com home 测试框架 它运行良好谷歌浏览器 http en wikipedia org wiki Google
  • 如何获取 CSS 旋转元素的实际(非原始)高度

    我需要获取几个不同元素的实际高度 为了精确的自定义工具提示定位 并且其中一些元素 不是全部 被旋转 elem outerHeight 返回原始高度 而不是实际显示的高度 这是一个非常简单的例子 http jsfiddle net NPC42
  • 元素上的 jQuery touchSwipe 事件阻止滚动

    我有一些清单div元素垂直排序 使用jQuery TouchSwipe 插件 https github com mattbryson TouchSwipe Jquery Plugin添加了滑动事件来捕获左右滑动 想法是通过向左或向右滑动来从
  • jqgrid嵌套子网格第四级子网格总是返回子网格的第一个rowid

    jqGrid v4 3 2 ie9荣获7家企业 我使用以下代码来生成子网格 http www trirand com blog jqgrid jqgrid html http www trirand com blog jqgrid jqgr
  • JSONP 回调失败,需要 javascript/jquery 帮助

    我是 json 的菜鸟 了解一点 jquery 并尝试让一个小脚本工作 我想检索某个纬度 经度的时间 并根据我在网上阅读的内容编写了这个脚本 getJSON http ws geonames org timezoneJSON lat 47
  • ajax 和相对 url

    我真的不明白这个 我有以下 获取 请求 ajax url api getdirectories dataType json success function data Do stuff 这是我的临时服务器向我提供的页面 http atlas
  • Primeng 时间表与 Angular2 webpack

    我将使用 Primeng 时间表 http www primefaces org primeng schedule http www primefaces org primeng schedule 在基于 Angular2 webpack
  • 如何在 Android 设备(平板电脑和手机)方向更改时获得正确的窗口宽度

    我正在尝试使用 jquery 函数计算 Android 设备方向变化时的窗口宽度 window outerWidth true 此计算给出了两个方向变化的正确宽度iphone and ipad但在安卓中不行 如果我最初以横向模式或纵向模式加
  • jquery .slideToggle() 水平替代方案?

    SlideToggle 正是我想要的 只是我希望幻灯片是水平的 我现在有一个水平隐藏 显示和点击动画 但我想要切换选项 这样 当我单击活动链接时 它将播放反向动画并隐藏自身 最好的方法是什么 您可以使用animate方法 element a

随机推荐

  • asp.net core 2.0中的机器密钥?

    我有相同的 asp net core 2 应用程序在 2 个不同的服务器上运行 但使用相同的数据库来存储用户等 问题是 如果我在一台服务器中创建并设置用户密码 则运行同一应用程序的另一台服务器将返回无效密码 反之亦然 几年前 我在使用 AS
  • 用于平铺列表视图的 WPF 工具包

    我需要创建格式良好的按钮图块 例如 Windows 8 起始页 是否有任何工具包可用于自定义 ListView 它可能支持平铺视图或网格视图 具有一些格式设置 并且可能有一些动画选项 我尝试创建自己的自定义列表视图 但这似乎是一项复杂的任务
  • 如何避免 super() 无限递归?

    我有这样的代码 class A object def init self self a 1 class B A def init self self b 2 super self class self init class C B def
  • 如何输入带密码的命令进行git pull?

    我想在一行中执行此命令 git pull my passphrase 怎么做 这并不完全是您所要求的 而是针对 http s 的 您可以将密码放在 netrc 文件中 Windows 上为 netrc 从那里它会被自动拾取 它将进入您的主文
  • 如何使用 jQuery Migrate 插件

    我正在使用 jquery 2 0 但还想使用 jQuery migrate 插件 以便我的网站可以在旧版浏览器上运行 然而 我一直没能成功地让它发挥作用 我的 html 标题部分有以下内容
  • 如何拦截具有标准 java 功能(无 AspectJ 等)的方法调用?

    我想拦截对某个类 MyClass 的所有方法调用 以便能够对某些 setter 调用做出反应 我尝试使用动态代理 但据我所知 这只适用于实现某些接口的类 但MyClass没有这样的接口 除了实现包装类之外 是否还有其他方法将所有调用委托给成
  • “列表”对象没有属性“查找”

    我知道这是一个基本问题 但我是 python 新手 不知道如何解决它 我有一个类似于下一个示例的列表 entities 1 IFCORGANIZATION Autodesk Revit 2014 ENU 5 IFCAPPLICATION 1
  • Android Https Web 服务通信 (SSL / TLS 1.2)

    在我的 Android 应用程序中 我必须与 https Web 服务进行通信并读取响应 我已经通知服务器配置了SSL with TLS 1 2 我使用以下示例代码来连接服务 https get 请求 但仅限运行的设备安卓5 0或以上可以成
  • 在Python中播放和控制mp3文件?

    首先 我是一名 Python 初学者 具有典型的面向对象知识的 C Java 背景 我确信要尝试使用 Python 来完成我当前正在做的工作 到目前为止我很喜欢它 我遇到的一个问题是找到一个好的 mp3 模块 我尝试过 TkSnack 它安
  • 如何以编程方式更新 UIView 的恒定高度约束?

    我有一个UIView我使用 Xcode Interface Builder 设置约束 现在我需要更新UIView以编程方式保持实例的高度常量 有一个函数就像myUIView updateConstraints 但我不知道如何使用它 从界面构
  • Symfony 注销处理程序

    我只是尝试了几个小时来弄清楚如何在注销操作后使闪存消息正常工作 安全 yml login pattern login security false secured area pattern form login check path che
  • 无法监听UIAxes的YLim属性

    MATLAB 提供了addlistener功能 监听器使我们能够跟踪对象属性的变化并对其采取行动 例如 我们可以创建一个非常简单的侦听器 当 YLim 的财产axes对象被改变 Example using axes ax axes addl
  • 句子间距[关闭]

    Closed 这个问题是基于意见的 目前不接受答案 呈现句子之间应有的额外间距的最佳方式是什么 使用 X HTML CSS p Lorem ipsum Dolor sit amet p wider than word spacing 由于
  • 在循环(或推导式)中创建函数(或 lambda)

    我正在尝试在循环内创建函数 functions for i in range 3 def f return i alternatively f lambda i functions append f 问题是所有功能最终都是相同的 所有三个函
  • 使用现有私钥和 RS256 算法生成 JWT

    我有以下 RSA 私钥 并且我必须生成 JWT 令牌使用RS256算法 这是我的样本私钥 BEGIN RSA PRIVATE KEY MIIEoAIBAAKCAQEAnFWdIwBbLRw4xfFDXYFmlXKB4BpKeuAtfh1dc
  • Java 中的嵌套函数

    Java 编程语言是否有任何扩展可以创建嵌套函数 在很多情况下 我需要创建仅在另一个方法或 for 循环的上下文中使用一次的方法 到目前为止 我还无法在 Java 中完成此任务 尽管可以在 JavaScript 中轻松完成 例如 这不能在标
  • 如何使用 Popen 在一个进程中运行多个命令?

    我想打开一个进程并在同一进程中运行两个命令 我有 cmd1 source usr local cmd2 ls l final Popen cmd2 shell True stdin PIPE stdout PIPE stderr STDOU
  • 如何全局设置 Jackson 以忽略 Spring 中的未知属性?

    Jackson 使用以下注释来忽略类中的未知属性 JsonIgnoreProperties ignoreUnknown true 它允许您使用此注释忽略特定属性 JsonIgnore 如果您想全局设置它 您可以修改对象映射器 jackson
  • 使用 Commons CSV 解析 CSV - 引号内的引号导致 IOException

    我在用共享 CSV解析与电视节目相关的 CSV 内容 其中一个节目的节目名称包含双引号 116 6 2 29 九月 10 JJ 60 分钟 http www tvmaze com episodes 4855 criminal minds 6
  • jQuery 根据类重新排序列表项

    有没有一种简单的方法可以使用类重新排序我的列表项 我想指定一个类来首先显示列表顶部的这些项目 然后列出下面的其他列表项目 ul class order me li class normal content li li class norma