Google を介して多くの調査を行い、いくつかのスタックオーバーフローの投稿を読み、jsfiddle を何時間もいじくり回した後、私はレンガの壁にぶつかりました。ポインタや助けに感謝します！
最初の Stackoverflow がここに自分自身を投稿します。これが正しいことを願っています。S&A大好きなので助かります！
私はjQueryをある程度理解していますが、これを解決するには十分ではありません(明らかに;-()
私がやろうとしていること（および** jsFiddled '）**
- 「section-content」という div 内のすべての「img」をターゲットにします
- 「src」と「alt」をそれぞれ抽出
<figure>「imgs」をラップする- リンク ( .section-content a img ) がある場合、そのリンクを一部として正しく表示します。
<figure><a href="URL"><img src="IMAGE" alt="alt"/></a></figure> - クラス「.section-image」を
<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/
私が直面している問題:
- リンク以外の画像 (「a」なし) で機能しますが、「.section-image」を (壊れる?! 奇妙なことに、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');
});