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

demo

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" />');​