在ul中使用给定类更改li元素的位置？答案

【问题标题】：Changing the position of a li element with a given class inside an ul?在ul中使用给定类更改li元素的位置？
【发布时间】：2010-02-19 22:12:15
【问题描述】：

我有一个带有几个 li 元素的 ul，其中一个将始终具有“活动”类。如何使 li.active 元素始终出现在列表顶部？

我无法控制生成此列表的 html 输出，因此我必须使用 css（最好）或 javascript/jquery 来执行此操作。我想没有办法用 css 来做到这一点，但是拥有某种位置列表属性会很棒。

非常感谢！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果我们假设列表项的高度是恒定的（这是一个相当大的假设）：

ul {
  position: relative;
  padding-top: 2em;
}

li {
  height: 2em;
}

li.active {
  position: absolute;
  top: 0;
  left: 0;
}

【讨论】：

这是一个非常好的主意，但我无法知道这些项目是否总是具有相同的高度。无论如何，我会保留这个想法，以防万一没有其他事情发生。谢谢大卫

【解决方案2】：

如果（我认为您确实如此）您需要操纵列表项的实际顺序，正如您所猜测的那样，仅 CSS 并不能解决问题。你用'jquery'标记这篇文章，所以我猜你知道那个库的选择器等等。当然，您只需要（a）选择类“活动”的 li 元素，然后（b）将所述项目插入无序列表的顶部？这在 jQuery 中是完全可行的。这是一个（非常）简单的方法：

    $('ul').prepend($('.active'));

所有这一切都是抓取页面上具有“活动”类的第一个元素，并将其添加到第一个无序列表中。这对于您的需求来说可能过于简单，但希望它能帮助您找到更强大的解决方案。

【讨论】：

嘿，我想这应该绰绰有余了。我会尝试并找回你。谢谢