javascript - jQuery - 条件付きで HTML を追加

Question

div 内の各画像の後に拡大鏡の画像を追加しようとしています。それらのいくつかはリンクされています。その場合、タグ</a>に続く の後に追加したいと思います。img

どうやって作ることができますか：

<img src="a.jpg" .... />

に変わります:

<img src="a.jpg"><img src="mag.gif" />

と：

<a href="...."><img src="a.jpg" .... /></a>

に変わります:

<a href="...."><img src="a.jpg"></a><img src="mag.gif" />

imgタグの前後に改行がある場合があることに注意してください。

それはどのように行われますか？

Answer 1

メソッドを使用できますafter。

一致した要素のセット内の各要素の後に、パラメーターで指定されたコンテンツを挿入します。

$('img').after('<img src="mag.gif"/>')

Answer 2

これを試して：

$('img[src="a.jpg"]').after('<img src="mag.gif" />');

これにより、各画像の後に拡大鏡画像が追加されsrc="a.jpg"ます。

jQuery.after()メソッドについて読んでください。

.insertAfter()以下のように使用することもできます。

$('<img src="mag.gif" />').insertAfter('img[src="a.jpg"]');

Answer 3

コードは次のとおりです。

$('img').parent().not('a').children('img:first').after('<img src="mag.gif" />')​;
$('img').parents('a:first').after('<img src="mag.gif" />');

実際のデモはhttp://jsfiddle.net/sURqy/にあります。

Answer 4

$.each($('img[src="a.jpg"]'), function(i) {
    var $element = $(this);
    if($element.parent('a').length) {
        $element = $element.parent();
    }
    $element.after('<img src="mag.gif"/>');
});

デモ

Answer 5

これにより、条件付きロジックが解決されます

var $a_with_img = $('a').has('img');
var $img_no_a = $('img').not('a img');
var $elements = $.merge($img_no_a, $a_with_img);
$elements.after('<img src="mag.gif" />');​