使用jQuery将<ul>的子项复制到另一个<ul>
使用jQuery将<ul>的子项复制到另一个<ul>可以通过以下代码实现：
// 获取源<ul>和目标<ul>元素
var sourceList = $("ul#source");
var targetList = $("ul#target");
// 遍历源<ul>的子项
sourceList.children("li").each(function() {
// 复制子项到目标<ul>
var clonedItem = $(this).clone();
targetList.append(clonedItem);
});这段代码使用了jQuery的选择器来获取源<ul>和目标<ul>元素，并使用.children()方法遍历源<ul>的子项。然后，使用.clone()方法复制每个子项，并使用.append()方法将复制的子项添加到目标<ul>中。
这种方法适用于需要将一个<ul>的子项复制到另一个<ul>的场景，例如在动态生成列表或者实现拖拽排序等功能时。腾讯云没有直接相关的产品或者服务与此问题相关。
相关·内容
1回答
我和jQuery有个问题。
我正在用带有子菜单的jQuery做一个移动菜单。我需要使用同一个类来激活所有菜单，因为它们将被动态创建，但是当我这样做时，当我单击一个项目时，所有其他菜单也会显示它们的子项。
为了清楚起见，下面是一个例子：
<ul>
<li class="OpenMenu"><a href="javascript:void(0);">Menu 1</a>
<ul class="sub-item">
<li>Item
浏览 5提问于2014-08-08得票数 1
回答已采纳
2回答
对于jquery，似乎有两种方法可以在DOM中的无序列表中查找列表项。
$("ul>li");
和
$("ul").find("li");
有没有可能后者更可取的原因？似乎需要更多的代码才能得到相同的结果。
浏览 7提问于2013-05-01得票数 9
回答已采纳
我已经建立了一个购物网站的CSS菜单。这个想法是主类别被点击，然后slideToggle启动并加载子类别。我已经建立了这些原则，并且正在研究jQuery .children
但是，当我单击该链接时，什么也没有发生。
我的jQuery如下：
$('ul.sub_menu').css('display','none');
$(".nav-list li a.clickable").toggle(function () {
$(this).children().slideToggle();
}, function() {
$(
浏览 0提问于2012-10-18得票数 0
回答已采纳
1回答
下面是我的html：
<ul id="dmenu">
<li><a href="#">menu item one</a></li>
<li><a href="#">menu item two</a>
<ul class="displayNone">
<li><a href="#">menu item one<
浏览 0提问于2013-07-18得票数 0
1回答
我有一个带有嵌套列表的无序列表，并使用jQuery UI Draggable拖动其中包含嵌套无序列表的顶部列表项。
<ul class="data-item_wrapper">
<li>
<ul class="row-data">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li&g
浏览 3提问于2014-01-07得票数 0
1回答
我使用以下jQuery代码从左到右折叠列表：(请参阅上的演示)
$('ul').hide()
$('li').contents()
.filter(function() {return this.nodeType === 3})
.wrap('<a>');
$('a').click(function() {
$(this).next('ul').toggle()
})
我想保留这个基本的功能，但是下一个嵌套级别的项目不应该一次出现，而是从上到下一个接一个地出现，例如在另一个鼠标点击或键
浏览 0提问于2011-09-03得票数 0
回答已采纳
1回答
无论我将鼠标悬停在菜单上，它都工作得很好。但是，当我尝试转到子菜单链接和子菜单时，菜单将关闭
/*----------------------------------------------------
/* Dropdown menu
/* ------------------------------------------------- */
jQuery(document).ready(function($) {
function mtsDropdownMenu() {
var wWidth = $(window).width();
if (wWidth &g
浏览 6提问于2016-07-20得票数 0
我使用这个html结构：
<div id="products">
<ul>
<li class="selected"><a href="#">Item 1</a>
<ul>
<li><a href="#">Sub-Item 1 a</a></li>
<li><a href=&#
浏览 1提问于2011-10-25得票数 0
2回答
Jquery -单击时的下拉菜单
、、、、
我对jquery比较陌生，我正在寻求帮助。其目的是单击附加到ul的列表项，并使其出现，同时任何其他列表项消失。只有处于活动状态的对象才可见
我遇到的问题是，当我点击另一个列表项时，激活的列表项消失了(如预期的那样)，但它没有显示另一个列表项，它仍然是隐藏的。我正在寻找一种方法来显示列表，同时隐藏那些不活跃的列表。
我已经上传了我的问题：
html：
<div id="secondary-nav"><!--secondary-nav-->
<ul>
<li><a href="#.html
浏览 0提问于2014-02-24得票数 2
回答已采纳
是否可以使用jQuery的find()或children()函数仅选择元素的直接子元素？
我有几个ul元素，每个元素中都有其他ul元素，还有一些根li元素。我将特定的父ul存储在一个变量中(作为jQuery对象)，然后使用：my_root_ul.find('li');查找任何根li元素。
但是，如果有意义的话，此方法还会查找属于ul中的ul的任何li。
我的问题是，如何使用find()在my_root_ul对象中仅选择li类型的直接子对象。通常，我们可以使用像$('ul > li')这样的东西来只返回直接的li元素，但是必须能够过滤掉返回的元素？
这里有一
浏览 1提问于2011-12-07得票数 40
回答已采纳
我正在使用jQuery在我创建的菜单中产生一个手风琴效果。该菜单是选项卡式的，使用jQuery UI选项卡，根据他们的文档，我不能在一个元素上使用多个效果。因此，我使用了slideUp()和slideToggle()来创建效果，就像<a onclick="$('ul#categories li ul').slideUp();$(this).next().slideToggle()">Subjects</a>一样。
但是，我的列表中有另一个无序列表，它不会显示。我不想有太多的链接设置为激活滑块，因为这变得非常复杂，以维护我的CMS输出的链接
浏览 0提问于2011-08-29得票数 0
回答已采纳
我使用的是Superfish的jQuery菜单系统，并且要求显示所有的孩子，而不考虑级别。该菜单仅显示所选项目的子项。也许有人能帮我弄清楚如何修改代码，让它以这种方式工作。
节点的HTML示例：
<li class="root"><a href="#" title="Training" class="root">Training</a>
<ul>
<li class="sub"><a href="#" title=
浏览 3提问于2009-06-11得票数 4
回答已采纳
我在一个巨大的“类似索引”的文件中计算孩子的时候遇到了问题，这个文件使用了详细信息和摘要标签。需要知道一个特定的摘要标签有多少子标签。代码示例只有完整文件的一小部分，但它显示了我正在寻找的内容:我使用'href‘值调用函数getAnswer，该函数确实找到了正确的条目，但从那里我被卡住了:如何查找子代的数量。注释掉的行显示我尝试了各种方法，但它们都给出了答案0，所以我想我不能使用$(this)。感谢您的帮助！
getAnswer('2013'); // should be 4
getAnswer('2013_spring'); // should b
浏览 6提问于2018-11-07得票数 1
3回答
我是jQuery新手，正在尝试隐藏和显示li列表。
当您单击父li (li.2015)、子li (ul.2015)列表时，它将显示并隐藏在何处。
但是，我只希望这种行为在父li (li.2015)上工作，而不是在单击子li列表(ul.2015)时使用。
现在，当我单击sub (ul.2015)时，它会隐藏，这是我不想发生的，我只想让显示/隐藏在父li (li.2015)上运行。
，我需要对我的jQuery做哪些更改？
html
<div class="content">
<ul class="date">
<
浏览 5提问于2015-03-08得票数 0
回答已采纳
我有以下几点
<ul>
<li>Main
<ul>
<li><input type="checkbox" onclick="$.SelectChildren(this);" /> parent 1
<ul>
<li><input type="checkbox" onclick="$.SelectChildren(this);" />sub 1</li
浏览 0提问于2010-09-22得票数 0
回答已采纳
我有一个树状菜单。该菜单中的最后一个<li>元素包含一个<a>元素。
我使用的是jQuery toggle()方法。
我知道默认情况下toggle()包含一个e.preventDefault()。
我想要做的是将单击事件返回给<a>元素。
你能帮帮我吗？
HTML：
<ul class="menu">
<li>
Item1
<ul style="display: none">
<li>
浏览 0提问于2013-03-13得票数 0
我有一个ul li列表
<ul>
<li>Parent
<ul>
<li>
child1
</li>
<li>
child2
</li>
</ul>
</li>
</ul>
我尝试使用选择器jQuery('ul li:first')和jQuery('ul li:first-child')，结果相同，这让我对这两个选择器的区别感到
浏览 3提问于2010-06-01得票数 20
回答已采纳
2回答
我正在尝试使用jquery来选择一个元素并向该元素添加一个类。我的html类似于以下内容：
<ul id="top">
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor">
<a href="#">Corporate</a>
浏览 0提问于2011-09-01得票数 1
回答已采纳
如何为下面包含<a>标记的列表编写适当的jquery代码。我有两个问题。
当我单击父列表项以显示子项时，父项将消失，并仅由同一行上的缩进子项替换。
由于某种原因，我可以单击"1“、"2”、"3“和"4”的最后一个元素，导致列表实际上消失了。我怎样才能解决这个问题？
HTML：
<div class="main_list">
<ul>
<li><a href="#">1.</a>
<ul>
浏览 0提问于2012-09-09得票数 0
回答已采纳
1回答
我在列表中使用了列表，我打算使用jquery将id发送到另一个php文件(updateDB.php)。
我试图序列化列表，但无法获得数据。我不知道我是否做对了，我试着到处看看，但是找不出代码有什么问题。
<ul>
<li id="recordsArray_<?some number?>"><?php echo content?>`
<ul>
<?php
while (some condition) {
?>
<d
浏览 1提问于2013-09-05得票数 1
1回答
我在codepen上创建了一个简单的jquery滑块，由于某种原因，在上一张幻灯片中，它会恢复到上一张幻灯片并出现bug。
if ( $(window).width()<= 700) {
jQuery(document).ready(function($) {
$('.switch-mobile').removeClass('small-products-text product-item-texts zstarrating2 small-pic-wrapper grid-item large--one-quarter medium--o
浏览 0提问于2018-05-18得票数 0
如何将其中包含li的ul的内容复制到另一个ul。
假设我们有t = $("ul#target")和s = $("ul#source")。
浏览 0提问于2010-11-30得票数 7
回答已采纳
2回答
我是一个初学者在Bootstrap .i我试图取消样式的列表使用无样式的类，但它没有删除黑点在最左边的每个选项如何删除这个黑点请指引我的代码是
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body&g
浏览 0提问于2013-06-09得票数 21
回答已采纳
我有一个这样的列表
<ul>
<li>
<ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>
<ul>
<li>something2</li>
<li>something2</li>
</ul>
</li>
</ul>
我使用选择器(见下文
浏览 1提问于2012-02-01得票数 1
回答已采纳
1回答
好吧，这有点像json对象和jquery模板的启动。我想知道如何做得更深。问题是我很懒，想让代码为我做工作.
Q:>如何递归地调用jQuery模板.
拿这个json对象：
var Links =
[{"Name":"Home","NiceUrl":"/home/","Children":null},
{"Name":"MX-8","NiceUrl":"/mx-8/","Children":null},
{"Name&
浏览 4提问于2011-06-22得票数 2
回答已采纳
我发现我的缩略图在点击时很难打开较大的图像。它似乎只适用于第一个缩略图，但我不知道为什么。
下面是我正在使用的代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
浏览 2提问于2011-01-13得票数 1
有没有一种简单的方法可以用jQuery选择div (或任何其他元素)中的所有元素
这周我已经找了好几个小时了，我还会继续用头撞键盘。
<div class="Someclass">
<img src="" title="" />
<ul>
<li></li>
<li><a href="" alt="" /></li>
</ul>
</div>
浏览 0提问于2011-03-15得票数 7
1回答
这就是我得到的。
它工作得很好，但计划突然改变了，我必须改变它的工作方式。
我希望保持相同的行为(slideUp / slideDown)，但我需要它们滑到第二列，而不是滑到它们各自菜单的正下方。我实际上会有至少3列，但行为是相同的。
我一直在寻找一个jQuery插件，但找不到任何类似的东西。
有没有人知道其中的一个？或者一个简单的方法来解决我的现状。
谢谢。
HTML：
<ul class="menu">
<li>Item 1</li>
<li class="submenu">Item 1-A
浏览 1提问于2015-02-10得票数 0
3回答
我需要一些关于jquery的小帮助。
编辑：
echo "<li> ";
echo $navi_menu->navi_name;
echo "<ul>";
它的Jquery是，
<script type="text/javascript">
$(document).ready(function () {
$("#nav li:has(ul)").click(function (event) {
浏览 1提问于2011-05-13得票数 0
回答已采纳
5回答
我必须排除嵌套在jQuery中的另一个div。以下是我的代码：
$(document).ready(function(){
$(".intro").not(".big").css("background-color", "yellow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<ht
浏览 1提问于2018-08-08得票数 1
我的下拉菜单滑得很好，但它在我的导航中的所有ul上都是这样做的。我需要它只为悬停的ul键打开菜单。我试着使用"this“元素，但对jQuery的了解不够，无法让它正常工作。任何人？
下面是HTML页面(为简单起见进行了编辑)
<div id="main-nav">
<ul><h1><a href="index.cfm">About Us</a></h1>
<ul>
<li><a href="#">
浏览 0提问于2010-03-03得票数 1
1回答
其中一些帮助我回答了最后一个问题，我对此非常感谢。不幸的是，我总是在I上遇到一系列奇怪的问题。
下面是我的代码，当您单击Family列表项时，它的背景将扩展到子项。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
浏览 1提问于2011-09-13得票数 0
回答已采纳
我在使用jQuery向Wordpress中的下拉导航菜单应用css样式时遇到了一个问题。
基本上，我有5个导航链接。其目的是让每个下拉链接都有自己的颜色。例如，当每个链接都有一个下拉列表时，我使用的代码似乎可以工作。但是，如果我只在第二个链接和第四个链接上有一个下拉列表，那么第四个链接下拉列表使用的颜色是第三个下拉列表中的颜色，即第n个孩子(4)应该使用#37595c，而不是使用第n个孩子(3)的颜色。任何帮助解决这个问题的人都将不胜感激。代码如下：
$(document).ready(function(){
$("#nav_main ul li:nth-child(1) ul
浏览 0提问于2011-07-30得票数 1
回答已采纳
1回答
我有这个密码
在HTML中：
<ul>
<li><a href=''>Item</a></li>
<li><a href=''>_subitem</a></li>
<li><a href=''>_subitem</a></li>
<li><a href=''>_subitem</a></li>
浏览 0提问于2021-01-09得票数 1
回答已采纳
一直在试图遵循一个指南，说明如何使用html/css/jquery制作一个简单的下拉菜单，但是最终结果完全搞砸了，我根本不知道原因。
出于某种原因，在下拉菜单的左边有一个空空间，我不知道它为什么在那里，也不知道我是如何摆脱它的.我会很感激你的帮助。
HMTL：
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="te
浏览 5提问于2014-10-24得票数 0
回答已采纳
1回答
当我点击打开时，它会切换所有子菜单。我只想切换li下的确切ul。
$(document).ready(function(){
$(".has-children>a").click(function(event){
event.preventDefault();
});
$('.has-children').click(function() {
$(this).find('>ul').toggle(300);
});
});
<script src="ht
浏览 12提问于2018-01-19得票数 0
4回答
我有一个多级菜单，如下所示：
<ul>
<li>item 1
<ul>
<li>item 1.1</li>
<li>item 1.2</li>
</ul>
</li>
<li>item 2</li>
<li>item 3
<ul>
<li>item 3.1</li>
<li>item 3.2</li>
浏览 0提问于2010-01-06得票数 3
回答已采纳
4回答
我正在创建一个水平的ul导航栏。每个li项都有不同的宽度。我希望在下拉菜单中“子”li项的长度/宽度与“父”li项的长度/宽度相同。正在考虑使用jQuery，所以应该是这样的：
jQuery("ul#menu li").width(); = jQuery("ul#menu ul li").width();
这显然不起作用，但希望它能让我对我想要做的事情有更多的了解。谢谢你的帮助。如果只用CSS就能做到，那就更好了。
浏览 2提问于2011-12-14得票数 0
回答已采纳
我有很多<ul>列表，并且尝试从这个列表的每个第一个li中获取文本。
标记很简单，如下所示：
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
诸若此类。
我的jQuery尝试是：
var elems = $('ul'); // returns a nodeList
var arr = jQuery.makeArray(elems);
arr.reverse(); // use
浏览 0提问于2013-03-15得票数 1
回答已采纳
1回答
我有一个网站，我试图使更多的访问。我希望当一个用户标签通过链接(焦点)，菜单将下拉并继续让用户标签通过子菜单链接。当子菜单链接完成后，它将标签到下一个主菜单项。
这是nav代码的简写版本：
<nav id="main-menu-con" class="mmenucon">
<div class="menu-menu-1-container">
<ul id="menu-menu-1" class="main-menu-items">
浏览 5提问于2019-12-13得票数 1
尝试使用jQuery构建常见问题页面。这是我正在使用的js：
$("#faq li").click(function (event) {
event.preventDefault();
$(this).next("#faq li ul").slideToggle("fast");
});
不知道为什么它不工作，任何帮助都是感激的。
下面是HTML：
<ul id="faq">
<li>Where are you located?
<ul>
We are located in
浏览 4提问于2012-08-28得票数 0
回答已采纳
下面的代码可以很好地在桌面和iOS上显示下拉菜单，但在安卓上，它会创建一个单击事件并刷新页面。我怎么才能阻止它呢？我还没有找到简单的方法来解决这个问题吗？
jQuery：
$('nav li').hover(
function () {
$('ul', this).fadeIn(100);
},
function () {
$('ul', this).fadeOut(100);
}
);
HTML：
<nav>
<ul>
浏览 2提问于2012-08-14得票数 0
1回答
我嵌套了ul和li。我为祖先li应用了text-decoration: underline;，并且这种风格被进一步继承到后代li。为了从后代li中删除应用的样式，我使用了另一个text-decoration: none !important;，但它不起作用。我使用的选择器是正确的，如果我改变文本颜色，它就可以工作。
我的问题是:为什么text-decoration: none;不适用于嵌套的li (青蛙、青蛙……)。我会感谢你的回答和解释，以了解原因。
ul li {
text-decoration: underline;
}
ul li ul li {
text-deco
浏览 1提问于2016-01-29得票数 3
1回答
切换下拉链接不起作用
、、、
我正在使用下面的jquery在我的侧边菜单上创建一个下拉切换效果(链接：)
jQuery(document).ready(function(){
jQuery('.site-navigation ul ul').hide();
if(jQuery('.menu-item-has-children').length > 0) {
jQuery('.menu-item-has-children').click(function(event) {
jQuery(this).addClass(
浏览 1提问于2016-09-29得票数 0
我正在尝试创建一个“可过滤”的项目列表。用户应该能够单击列表元素(父元素)，这将隐藏所有其他父元素并显示“子元素”。
html的一个例子是：
<ul class='parent_list'>
<li>Parent 1</li>
<ul class='child_list'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
<
浏览 0提问于2012-12-09得票数 1
回答已采纳
1回答
我正在尝试设计像followingL这样的东西
<ul class="top">
<li><a href="#">Menu1</a></li>
<li>
<a href="#">Menu2</a>
<ul class="sub">
<li><a href="#">SubMenu1</a></li>
<li&g
浏览 0提问于2013-07-19得票数 3
回答已采纳
我正在尝试这样的东西
jQuery(document).ready(function($){
$('nav ul li').hover(
function() {
$('this.menu1bar').animate({ backgroundColor: "#95c938" }, "fast");
$('this.menu2bar').animate({ backgroundColor: "#95c938" }, "f
浏览 3提问于2011-02-27得票数 2
大家好，我想知道如何在子菜单中移动鼠标的同时保持父菜单的悬停状态。
我是jQuery的初学者，我希望您能给我一些提示/建议。
jQuery代码
// Navigation Slide //
var navHover = function () {
$("#S" + this.id).animate({top: '-40px'}, 300, 'swing')
$(this).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop
浏览 1提问于2010-11-30得票数 2
回答已采纳
我正在编写一个小的JSP页面，它应该使用一个JavaScript库，但是我在解析这个库时遇到了问题。为了测试这个问题，我创建了一个简单的web应用程序，并添加了以下HTML文件：
<html>
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.cookie.js">
浏览 1提问于2010-12-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
