CODEWITHSUNDEEP
javascriptjquerywrapall
Adrian M.
Adrian M.

Reputation: 7453

How to wrap and re-order elements inside?

I am trying to wrap some elements with jQuery in a li element. My problem is that I want to switch the order they will be inside the li. Right now is li start - a - div - li end, but I want li start - div - a - li end.

How can I do this? I tried everything but it didn't work. Here is my current code:

$('a.top_link+div.sub').not(":first").each(function() {
  $(this).prev().andSelf().wrapAll('<li class="aaa">');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="something.com" class="top_link">Something</a>
<div class="sub">Some other content..</div>

I want to wrap that and re-order the content to look like:

<li class="aaa">
  <div class="sub">Some other content..</div>
  <a href="something.com" class="top_link">Something</a>
</li>

The elements above are more than one, only the content is different (part of a menu).

Upvotes: -1

Views: 323

Answers (1)

techfoobar
techfoobar

Reputation: 66693

This should work:

$('a.top_link+div.sub').each(function () {
    $(this).insertBefore($(this).prev()).add($(this).next()).wrapAll('<li class="aaa">');
});

For each div.sub, the above code does:

  1. Move it to before the <a>
  2. Add the <a> to the collection
  3. Wrap both in an <li>

Demo: http://jsfiddle.net/vjC3x/

Upvotes: 1

Related Questions