0

I'm trying to replace two divs that has separate ul elements into a single one, so I can create a single ul with the li of both, but my current code creates separate ul, and that is not my intended purpose, could anyone enlighten me on how to make the proper selection for these:

my 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;
    });

my 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>

And the output I get (not what I want)

<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>

What I want is a single 'ul', I know I can recode it, but I'm trying to use the less code posible.

2 Answers 2

2

Your example does not include a <nav> tag which may be the primary cause of your problem, but to produce more readable code I would do it like this.

I used an array for the selectors, because it aids in readability and maintainability. It also allows you to easily insert the new list before the first menu by using only the first selector, whatever that may be.

Basically I select all of the <li> elements descending from the selectors and move those to the newlist. Then insert the new list before the first list div. Then remove the old lists.

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();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <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>
</nav>

1
  • I have just reviewed this answer, Rama Rao answer quite solved my problem, but this answer could be applied for combining many DOM elements of the same type, nice approach Commented Oct 12, 2015 at 3:59
0

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

Is this what you are looking for!!

1
  • Yes, I needed to add .unwrap() to remove the parent div at the end but it worked as intended, I didn't knew how to approach it properly Commented Oct 7, 2015 at 23:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.