检查图像上的 alt-attribute 是不是具有价值并在 <div> 中添加另一个图像

Posted 2023-04-13

【中文标题】检查图像上的 alt-attribute 是不是具有价值并在 <div> 中添加另一个图像

【英文标题】：Check if alt-attribute on images has value and add <div> with another image inside检查图像上的 alt-attribute 是否具有价值并在 <div> 中添加另一个图像

【发布时间】：2013-04-09 18:04:48

【问题描述】：

我对 JQuery 和 javascript 比较陌生，所以我需要一些关于我正在尝试编写的 JQuery 代码的帮助。我想做的是编写一个函数，在 Wordpress 中查看某个帖子中的所有图像，并检查它们是否有alt="watermark"。

如果他们这样做了，那么我想将 <div> 包裹在每个 <img> 周围。此外，我想在 <div> 中放置第二张图片，放在另一张图片的顶部。我已经设法根据alt 在图像周围创建div。我还能够在 div 内部的现有图像上添加图像。但是我无法重复最后一个动作。我的代码只将图像添加到第一个<div>。

$(document).ready(function()
$("img[alt*='watermark']").wrap('<div id="watermark" />');  
$('#watermark').prepend("<img src='images/watermark.png'/>");
);

【问题讨论】：

@adeneo 将 ID 更改为 classes 使其工作！不知道。非常感谢您对 adeneo 的帮助。

@KjetilRavnås - 不客气。 ID 在文档中应该始终是唯一的，因此只能有一个具有该唯一 ID 的元素等。这就是为什么 jQuery 一旦找到第一个元素就停止，它不希望有更多具有相同 ID 的元素，因为将是无效标记。

请注意 - 在 IE 中测试它。使用“wrap”时，如果您没有有效的 html 标记，IE 有时会很容易受到攻击。如果您发现 IE 出现问题，请在 .wrap 方法中添加结束

。

【参考方案1】：

您可以使用before()在当前图片之前添加图片：

$(document).ready(function()
    $("img[alt*='watermark']").wrap('<div id="watermark" />');
                              .before("<img src='images/watermark.png'/>");
);

这个选择器：

$('#vannmerke_hvit')

表示一个 ID，并且 ID 是唯一的，因此仅适用于一个元素，即第一个元素。您可以将其更改为一个类以使其与多个元素一起使用。

Lykke 直到！