Question

我试图将两个具有单独ul元素的div替换为单个div，因此我可以使用两者的li创建单个ul，但是我当前的代码会创建单独的ul，这不是我想要的目的，任何人都可以启发我如何正确选择这些：

我的jQuery

$('nav div.moduletable_gfbb_navigationbar, nav div.moduletable_menu_navigationbar').replaceWith(function(){
        var html = '<ul class="nav navbar-nav navbar-right">';
        $(' ul',this).each(function(){
            html += $(this).html();
        });
        html+='</ul>';
        return html;
    });

我的HTML

<div class="moduletable_menu_navigationbar">
<ul class="menu">
   <li id="current" class="active item8"><a href="http://localhost/html/"><span>Banca Personas</span></a></li>
   <li class="item9"><a href="/html/banca-pyme.html"><span>Banca Pyme</span></a></li>
   <li class="item10"><a href="/html/banca-empresas.html"><span>Banca Empresas</span></a></li>
   <li class="item602"><a href="/html/bankard.html"><span>Bankard</span></a></li>
</ul>       
</div>
<div class="moduletable_gfbb_navigationbar">
                    <ul class="menu">
<li class="item12"><a href="/informacion-institucional.html"><span>Informacion Institucional</span></a></li>
</ul>       
</div>

我得到的输出（不是我想要的）

<ul class="nav navbar-nav navbar-right">
    <li class="item12"><a href="/informacion-institucional.html"><span>Informacion Institucional</span></a></li>
</ul>                                                                       
<ul class="nav navbar-nav navbar-right">
    <li id="current" class="active item8"><a href="http://localhost/html/"><span>Banca Personas</span></a></li>
    <li class="item9"><a href="/html/banca-pyme.html"><span>Banca Pyme</span></a></li>
    <li class="item10"><a href="/html/banca-empresas.html"><span>Banca Empresas</span></a></li>
    <li class="item602"><a href="/html/bankard.html"><span>Bankard</span></a></li>
</ul>

我想要的只是单个＆＃39; ul，我知道我可以重新编码，但我尝试使用更少的代码。

Answer 1

您的示例不包含dispose标记，这可能是您遇到问题的主要原因，但为了生成更易读的代码，我会这样做。

我为选择器使用了一个数组，因为它有助于提高可读性和可维护性。它还允许您通过仅使用第一个选择器轻松地在第一个菜单之前插入新列表，无论可能是什么。

基本上，我选择从选择器下降的所有<nav>元素，并将它们移动到新列表中。然后在第一个列表div之前插入新列表。然后删除旧列表。

＆＃13;

<li>

＆＃13;

var selectors = [
  'nav div.moduletable_gfbb_navigationbar', 
  'nav div.moduletable_menu_navigationbar'
], selectorText = selectors.join(', ');

var newList = $('<ul class="nav navbar-nav navbar-right">');
$('li', selectorText).each(function(){ newList.append(this); });
$(selectors[0]).before(newList);
$(selectorText).remove();

＆＃13;

Answer 2

$('.moduletable_menu_navigationbar .menu').append($('.moduletable_gfbb_navigationbar .menu').html()); $('.moduletable_gfbb_navigationbar').remove();

这就是你要找的!!

jQuery用一个元素替换多个元素

2 个答案: