CODEWITHSUNDEEP
jqueryimagefigurereplacewith
koala
koala

Reputation: 3

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

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')**

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.

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

Upvotes: 0

Views: 297

Answers (1)

haim770
haim770

Reputation: 49095

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

Upvotes: 0

Related Questions