Question

我已动态创建了引导程序菜单链接。

foreach (var link in links)
{
  <li data-name="@link.Dropdown" ><a href="@Url.Action(link.Action, link.Controller, new { area = link.Area })">@Html.Raw(link.Icon) @link.LinkName</a></li>
}

有些链接应该是下拉列表，所以我试图将它们包裹起来

$('li[data-name=School]').wrapAll("<li class='dropdown'>" +
                 "<a href='#' class='dropdown-toggle' data-toggle='dropdown'><i class='glyphicon glyphicon-flag'></i> School <b class='caret'></b></a>" +
                 "<ul class='dropdown-menu'></ul></li>");

我想在<ul class='dropdown-menu'></ul>之间插入匹配元素，但它会在<i></i>之间插入。我也是这样试过的：

    $('li[data-name=School]').wrapAll("<ul class='dropdown-menu'></ul>").before("<a href='#' class='dropdown-toggle' data-toggle='dropdown'><i class='glyphicon glyphicon-user'></i> School <b class='caret'></b></a>").wrapAll("<li class='dropdown'></li>");

Answer 1

Wrappings假设内容进入最内层元素。你的包装器有两个内部元素，所以它很难选择最后一个（这是你想要的）。相反，它针对的是第一个（<i>）。

第一步，将元素包装在新的UL / LI：

中

$('li[data-name=School]').wrapAll("<li class='dropdown'><ul class='dropdown-menu'></ul></li>");

第二步，添加新链接：

.closest('.dropdown').prepend("<a href='#' class='dropdown-toggle' data-toggle='dropdown'><i class='glyphicon glyphicon-flag'></i> School <b class='caret'></b></a>");

简单地说：

$('li[data-name=School]').wrapAll("<li class='dropdown'><ul class='dropdown-menu'></ul></li>").closest('.dropdown').prepend("<a href='#' class='dropdown-toggle' data-toggle='dropdown'><i class='glyphicon glyphicon-flag'></i> School <b class='caret'></b></a>");

JSFiddle： http://jsfiddle.net/TrueBlueAussie/eLgokpd1/

用Jquery包装动态创建的html元素

1 个答案: