jQuery 实现交换元素位置（移动节点）

最新推荐文章于 2025-05-30 09:59:43 发布

ld513508088

最新推荐文章于 2025-05-30 09:59:43 发布

阅读量5.6w

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/ld513508088/article/details/27117057

jQuery 专栏收录该内容

5 篇文章

订阅专栏

这篇博客演示了如何使用jQuery的`before()`和`insertBefore()`方法来交换HTML列表中的元素位置。通过选取指定索引的`<li>`元素，并将其移动到另一个`<li>`元素之前，实现了列表项的位置互换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-3-2</title>

<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
var $one_li = $("ul li:eq(1)");    // 获取<ul>节点中第二个<li>元素节点
var $two_li = $("ul li:eq(2)");    // 获取<ul>节点中第三个<li>元素节点
$two_li.insertBefore($one_li);    //移动节点
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
   <li title='苹果'>苹果</li>
   <li title='橘子'>橘子</li>
   <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>