Невозможно получить jQuery replacewith «img to figure», чтобы ссылка (a href) была чувствительной (перерывов)

Question

после долгих исследований через Google и прочитав несколько сообщений stackoverflow, возившись с моим jsfiddle в течение нескольких часов, я ударил кирпич стены. Цените любые указатели или помощь!

First Stackoverflow ставьте себя здесь - надеюсь, что я прав. Я люблю S & A, так полезно!

У меня есть JQuery понимание, но далеко не достаточно, чтобы решить эту проблему (по-видимому, ;-()

То, что я пытаюсь сделать (и ** jsFiddled «) **

• цель все «IMG» в DIV под названием «секция-контент»
• экстракта «ЦСИ» и «альт» каждый
• обертывания <figure> вокруг «ГИМ»
• ЕСЛИ есть ссылка (.section-контент IMG), чтобы правильно отображать ссылку как часть <figure><a href="URL"><img src="IMAGE" alt="alt"/></a></figure>
• добавить класс «.section-образом» к <figure>
• полосам всему нонсенсу, как ширина, высота (около 500 сообщений, так что чистый код будет приятно)
• стрип класс старый CSS и стили от IMG

в основном для преобразования:

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

К

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

И если есть ссылка:

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

К

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

То, что я сделал до сих пор: - jsFiddle - http://jsfiddle.net/NGJYy/

Проблема я столкнулся: - работает для изображений без ссылок (без «а»), но я не могу добавить».section-изображение «К (ломается ?! странно, попробовал return $('<figure class="section-image">', { , которому это не понравилось - изображения больше не показывались.

• ЕСЛИ ЛИНИЯ СУЩЕСТВУЕТ, что он просто терпит неудачу и обертывает вокруг, а затем еще раз и возвращает HREF как неопределенный.

Это работает (спасибо вам!)

$('.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

Почему бы не использовать wrap() метод JQuery в?

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

В вскрышных специфических атрибутов:

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

EDIT (в соответствии с вашим комментарием):

$('.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