Can't get jQuery replacewith "img to figure" to be link (a href) sensitive (breaks)

Question

after much research via Google and having read several stackoverflow posts, having tinkered with my jsfiddle for hours, I have hit a brick wall. Appreciate any pointers or help!

First Stackoverflow post myself here - hope I get this right. I love S&A, so helpful!

I have some jQuery understanding, but by far not good enough to solve this (apparently ;-()

What I am trying to do (and **jsFiddled')**

• target all "img" in a div called "section-content"
• extract "src" and "alt" each
• wrap <figure> around the "imgs"
• IF there's a link (.section-content a img) to correctly display the link as part of <figure><a href="URL"><img src="IMAGE" alt="alt"/></a></figure>
• add class ".section-image" to the <figure>
• strip all nonsense like width, height (some 500 posts, so clean code would be nice)
• strip old css class and styles from img

Basically to transform:

   <img width="174" height="174" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJPGfl3z2jsaZckTE4-TuK6bfvbTWk_8QNAStYN4eUWNYbkYeKMA" class="image-style" alt="description"/> 

TO

   <figure class="section-image"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJPGfl3z2jsaZckTE4-TuK6bfvbTWk_8QNAStYN4eUWNYbkYeKMA" alt="description"/></figure>

AND if there's a link:

   <a href="http://www.google.com"><img width="174" height="174" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJPGfl3z2jsaZckTE4-TuK6bfvbTWk_8QNAStYN4eUWNYbkYeKMA" class="image-style" alt="description"/></a>

TO

   <figure class="section-image"><a href="http://www.google.com"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJPGfl3z2jsaZckTE4-TuK6bfvbTWk_8QNAStYN4eUWNYbkYeKMA" alt="description"/></a></figure> 

What I have done so far: - jsFiddle - http://jsfiddle.net/NGJYy/

The problem I am facing: - works for non-link images (without "a"), but I cannot add ".section-image" to the (breaks?! oddly, tried return $('<figure class="section-image">', { which it didn't like - images wouldnt be shown anymore then.

• IF A LINK EXISTS it just fails miserably and wraps the around the and then yet another time and returns the HREF as undefined.

This works (thanks to your help!)

$('.section-content * > img, .section-content * > a:has(img)').wrap('<figure class="section-image" />'); // will target elements to match your original question
  //$('.section-content > *').wrap('<figure class="section-image" />'); // will target all direct child elements
  //$('.section-content > img').wrap('<figure class="section-image" />'); // all direct IMG child elements
  //$('.section-content img').wrap('<figure class="section-image" />'); // all IMG descendants (including grand-children etc)
  //$('.section-content > img, .section-content > a').wrap('<figure class="section-image" />'); // all direct IMG and A child elements

$('.section-content img').each(function()
       {
       $(this).removeAttr('width');
       $(this).removeAttr('height');
       $(this).removeAttr('style');
       $(this).removeAttr('class');
       });

Answer 1

Why not use jQuery's wrap() method?

$('.section-content > *').wrap('<figure class="section-image" />');

As of stripping specific attributes:

$('.section-content img').each(function()
       {
       $(this).removeAttr('width');
       $(this).removeAttr('height');
       $(this).removeAttr('style');
       });

EDIT (as per your comment):

  $('.section-content > img, .section-content > a:has(img)') // will target elements to match your original question
  $('.section-content > *') // will target all direct child elements
  $('.section-content > img') // all direct IMG child elements
  $('.section-content img') // all IMG descendants (including grand-children etc)
  $('.section-content > img, .section-content > a') // all direct IMG and A child elements