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