jQuery-有条件地附加HTML

jQuery - conditionally append HTML

本文关键字：HTML 有条件 jQuery-      更新时间：2023-09-26

我正试图在div中的每个图像后面附加一张放大镜的图片。其中一些图像是链接的，在这种情况下，我希望它将其附加在img标签后面的</a>之后。

如何制作：

<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标记前后可能存在换行符。

这是怎么做到的？

您可以使用after方法。

在匹配元素集中的每个元素之后插入由参数指定的内容。

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

试试这个：

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

这将在src="a.jpg"的每个图像之后添加放大玻璃图像。

阅读jQuery.after()方法。

您也可以使用.insertAfter()，如下所示：

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

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

演示

这解决了您的条件逻辑

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

这是您的代码：

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

相关文章：