如何将 <a> 项保存为变量，然后作为功能 HTML 附加到 DIV答案

【问题标题】：how to save <a> items as a variable then append to a DIV as functional HTML如何将 <a> 项保存为变量，然后作为功能 HTML 附加到 DIV
【发布时间】：2013-07-07 10:46:35
【问题描述】：

我有一个由嵌套列表组成的菜单（下面摘录），每个项目链接到另一个页面，当用户将鼠标悬停在第一级列表项上时，一个变量将 html 存储在该项目中，然后将其传递给另一个DIV。以下是列表的编写方式：

 <ul id="siteMenu">
 <li><a href="shop-for-yarn">Colours</a>
<ul >
<li><a href="linktopage">Blacks/Greys</a></li>
<li><a href="linktopage">Blues</a></li>
<li><a href="linktopage">Greens</a></li>
<li><a href="linktopage">Mauve/Lilacs</a></li>
<li><a href="linktopage">Oranges</a></li>
<li><a href="linktopage">Yellows</a></li>
<li><a href="linktopage">Whites/Pastel</a></li>
</ul>
 </li>
 </ul>

一切似乎都在工作，除了列表在附加到 DIV 时会丢失链接。

这是 JQuery 的一点...

$("ul#siteMenu li") .mouseover(function() {

    var list = $(this) .find("ul") .html();

$("#menuDisplay") .empty() .append("<ul>"+list+"</ul>");

});

如果有人知道为什么会发生这种情况，请告诉我，谢谢。

【问题讨论】：

标签： jquery html list hyperlink append

【解决方案1】：

尝试使用.clone 将内容捕获到变量中，并使用append() 将其应用于新的<div>

$(document).ready(function() {
    $("ul li").mouseover(function() {
        var list = $(this).find("ul").clone();
        $('#menuDisplay').empty().append(list);
    });
});

【讨论】：

【解决方案2】：

$("ul#siteMenu > li").mouseover(function() {
    var list = $(this).find("ul");
    $("#menuDisplay").empty().append(list);
});

【讨论】：