如何使用JQuery将<li>从<ul>移动到单独div中的另一个<ul>
使用JQuery将<li>从<ul>移动到单独的<div>中的另一个<ul>可以通过以下步骤实现：
- 首先，确保在HTML文件中引入了JQuery库，可以通过以下代码在
<head>标签中添加引用：
<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>- 在HTML文件中，创建两个
<ul>元素和一个目标<div>元素，如下所示：
<ul id="sourceList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="targetDiv">
<ul id="targetList"></ul>
</div>- 使用JQuery选择器选中要移动的
<li>元素，并使用appendTo()方法将其添加到目标<ul>中，如下所示：
$(document).ready(function() {
// 将<li>从<sourceList>移动到<targetList>
$("#sourceList li").appendTo("#targetList");
});完整的示例代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Move <li> using JQuery</title>
<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<ul id="sourceList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="targetDiv">
<ul id="targetList"></ul>
</div>
<script>
$(document).ready(function() {
// 将<li>从<sourceList>移动到<targetList>
$("#sourceList li").appendTo("#targetList");
});
</script>
</body>
</html>这样，<li>元素将从源<ul>中移动到目标<ul>中。
相关·内容
我正在尝试使用jQuery在DOM中将元素从一个位置移动到另一个位置。在它旁边有与原始容器相同的元素，那么我如何存储它以前的确切位置，以便它将返回到它？这里有一个例子..。></li> &
浏览 2提问于2012-05-15得票数 7
所以我有两个容器，其中包含单独的ul。我的目标是将一个子<li>从一个ul移动到另一个。我目前使用jquery在ul中有一个删除li的函数，如下所示： //check off specific todos
$("ul").on("click", &quo
浏览 34提问于2020-06-24得票数 0
回答已采纳
我有带子菜单的菜单。我想使用jquery将所有子菜单(无序列表)移动到一个扩展的div中。</ul> <li> </li
浏览 5提问于2013-08-07得票数 1
回答已采纳
>A</li> <li class="active">C</li> </div> <ul&
浏览 4提问于2012-01-13得票数 0
回答已采纳
我有这个，由于某种原因，我的下拉菜单在点击时不起作用。 $(this).has("ul").css({display: "block"});
});
浏览 6提问于2013-11-07得票数 0
回答已采纳
0回答
我有一个由嵌套的ul列表提供的导航，如下所示 <li> Some Stuff!<ul > <div class='login'> <input type='password'>
浏览 4提问于2017-06-16得票数 0
回答已采纳
我有一个div元素，类似于...that，我想将DOM中的从一个位置移到另一个位置。如果它被复制，DOM中将有两个具有相同id的元素。我怎么能避免这种情况？
浏览 1提问于2011-11-24得票数 9
回答已采纳
当我点击第一年(.2009)时，它应该只显示该年内的内容(在本例中为"Content1")。当我单击列表.years的另一个元素时，"Content1“应该隐藏起来。}
display: block;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.
浏览 6提问于2022-05-31得票数 1
回答已采纳
我使用jQuery可排序插件将项目从一个列表移动到另一个列表。当我拖动该项目时，它应该首先获得该项的id，然后获得我要悬停到的项的id，以便在值相同的情况下替换它，或者如果值不同则将项目移回原始列表。我将第二个列表设置为禁用，因为我只想将项目从sortabl
浏览 3提问于2017-05-15得票数 1
回答已采纳
1回答
我有两个列表，每个列表都有一个唯一的ID，我想知道如何才能阻止父-父列表--主列表--将整个外部部分<div>放到一个已经包含了自己的<ul> <li>列表的<li> <div>中。我想知道是否有办法迫使属于第一个列表的项目留在那里，即使它们移动到另一个列表上，其中包含一个主要的
浏览 3提问于2013-03-11得票数 0
回答已采纳
1回答
把李从一个ul拖到另一个ul
、、、、
我试图使用jquery可拖放的jquery将<li>从一个<ul>移动到另一个<ul>。目前我有<div> <ul id="basket" class="
浏览 1提问于2016-05-05得票数 0
回答已采纳
我已经查看了jquery文档，我尝试过的每个示例都会给我带来问题。我有一堆具有不同类的列表项，我只想在一个特定的li项之前添加一个div ()。然后我想针对一个不同的列表项，并添加一个结束div ()。<ul>
&l
浏览 0提问于2012-01-21得票数 2
回答已采纳
我是jquery sortable的新手，所以参考本教程。但上面教程演示了在单个div中排序列表项，即项将在同一div中排序(更改其位置)，但我的要求是将列表项从第一个div排序到第二个div，类似地将项从第二个div移动到第三个div。但是在我的例子中，所有3个div都是并排的</e
浏览 0提问于2020-01-09得票数 0
我有多个jquery ui可排序列表，只要一个列表接收到条目，这些列表就会连接并手动平衡到N个条目-就像下面的答案：
但是，当您在列表之间手动移动项时(使用jquery的.appendTo()或.prependTo())，jquery ui可排序库不会检测到这些更改，因此当您使用"cancel“命令恢复状态时，手动移动的项不会放回其原始列表中。有没有一种适当的方法来手动将一个项目从一个列表移动到</
浏览 1提问于2013-01-13得票数 0
1回答
我有一个jquery可排序的连接页，如 <ul id="sortable1" class="connectedSortable<li>Item 4</li>
浏览 3提问于2013-08-02得票数 0
回答已采纳
2回答
我已经研究了如何使用$("#slideShow1 ul li:first").appendTo('#slideshow1 ul');将ul中的第一项附加到最后一项，我想在幻灯片中添加一些附加效果，但是我发现即使移动下面是html和上的演示 <div
浏览 6提问于2015-08-25得票数 0
回答已采纳
1回答
当我将鼠标移动到navbarli1上，然后移动到另一个具有navbarli1类的li上时，li不再向下滑动。="SubMenu"> <li>کلاس های حضوری</li>
<li>
浏览 1提问于2013-08-15得票数 0
我正在使用下面的Html代码，我希望从<li>中获取所有的<div id="divSelect">标记，我希望从所有的li标记中获取文本。谢谢
浏览 5提问于2014-07-21得票数 0
回答已采纳
4回答
}); display: none;<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Button">Button</div>
浏览 5提问于2017-08-05得票数 1
回答已采纳
2回答
我有一个div中的项列表，可以移动到另一个带有jquery可排序的列表中。这是我的html： <span>MyPage disponibili</span> </
浏览 8提问于2015-03-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
