jQuery.wrap HTML 元素与一个不做任何事情的 div答案

【问题标题】：jQuery.wrap HTML elements with a div that does not do anythingjQuery.wrap HTML 元素与一个不做任何事情的 div
【发布时间】：2012-12-10 23:46:36
【问题描述】：

假设有一个具有多种样式等的复杂网站。该网站上也有许多图像可以定位、内联、块或其他。

我想做的是在每张图片上方放一个小叠加图标！

第一次尝试是在正文末尾为每个图像创建一个position:absolutespan，并将其移动到图像上。问题：如果网站上的某些内容移动、隐藏或显示，则图像可能也会移动，但图标叠加层会保留，因此图标将不再位于图像上方。

所以我想使用jQuery.wrap 将每个图像包装在一个带有position:relaitve 的div 中，然后我将图标叠加层也放在该div 中并将其放置在div 中。所以如果div+image移动，图标也会移动。

问题是 div 必须在某种程度上对上下文、网站结构和 dom 没有影响，这样它才不会破坏网站的布局。如何创建这样一个“中性”的 div？

我的代码的简化版：

$("img:visible").each(function(i, v){
    var img = $(this);
    var position = img.offset();
    $('<span class="icon" />')
    .css({
        'top': position['top'] + 5,
        left': position['left'] + 5
    })
    .appendTo(document.documentElement)
}
//css
.icon {
    position: absolute;
    display: block;
    z-index: 50000;
    width: 16px;
    height: 16px;
}

【问题讨论】：

你能展示你正在使用的代码吗？
让它与硬编码的 HTML/CSS 一起工作，然后研究如何使用 javascript/jQuery 实现自动化。
我的代码已经可以正常工作并正确显示覆盖图标。但如果我这样做 $('body').prepend('
');然后所有图像都会下移 300 像素，但图标不会！不幸的是，我无法跟踪所有此类元素的插入或删除来更新我的图标覆盖.....

标签： javascript jquery css dom jquery-wrap

【解决方案1】：

不要使用块级元素，它可能会扰乱您的 HTML 流。而是使用 <span> 元素，它会环绕图像，但不会将自己的结构添加到页面：

$(function () {
    $("img").wrap('<span class="img-overlay" />');
});

然后您可以将任何 CSS 添加到 .img-overlay 类，例如作为水印的背景图像。

如果你想用更多的 HTML 包装图片，你可以像这样一次性添加：

$(function () {
    $("img").wrap(
        $('<span class="img-overlay" />').append(
            $('<span class="img-underlay" />')
        )
    );
});

我建议尝试使用尽可能少的元素，因为这将为您的用户创造更流畅的体验。

【讨论】：

假设图像在某种程度上是 float:right 或其他东西。跨度不会搞砸吗？

【解决方案2】：

在 CSS 中声明以下规则：

img {
  display: block;
  object-fit: contain;
  height: auto;
  margin: 0;
}    

.frame {
  position: relative;
  padding: 0;
  margin: 0;
  width: fit-content;
  height: auto;
}

.logo {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background: url(https://jsdotgit.com/js-small.gif)no-repeat center;
  background-size: contain;
  width: 2vw;
  height: 4vh;
}

jQuery 应该在.each() <img> 周围插入一个.wrap() <figure class="frame"> 并插入一个<figcaption class="logo"> .before() 每个<img>。

$(function() {
  $('img').each(function() {
    var frame = `<figure class='frame'></figure>`;
    var logo = `<figcaption class='logo'></figcaption>`;
    $(this).wrap(frame).before(logo);
  });
});

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: fit-content;
}

.column {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: fit-content;
}

img {
  display: block;
  object-fit: contain;
  height: auto;
  margin: 0;
}

.l {
  width: 18vw
}

.m {
  width: 9vw
}

.s {
  width: 6vw
}

.frame {
  position: relative;
  padding: 0;
  margin: 0;
  width: fit-content;
  height: auto;
}

.logo {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background: url(https://jsdotgit.com/js-small.gif)no-repeat center;
  background-size: contain;
  width: 2vw;
  height: 4vh;
}

<main class='gallery'>
  <img src='https://i.imgur.com/ydfYXqh.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='m'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='m'>
  </section>
  <img src='https://i.imgur.com/dp8G9Fr.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/ydfYXqh.jpg' class='s'>
    <img src="https://i.imgur.com/AXUJEUS.jpg" class='s'>
    <img src='https://i.imgur.com/dp8G9Fr.jpg' class='s'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='s'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='s'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='s'>
  </section>
  <img src='https://i.imgur.com/MEPxbq4.jpg' class='l'>
  <img src='https://i.imgur.com/dp8G9Fr.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='s'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='s'>
    <img src='https://i.imgur.com/AXUJEUS.jpg' class='s'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/dp8G9Fr.jpg' class='m'>
    <img src="https://i.imgur.com/AXUJEUS.jpg" class='m'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='m'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='m'>
  </section>
  <img src='https://i.imgur.com/ydfYXqh.jpg' class='l'>
  <img src="https://i.imgur.com/AXUJEUS.jpg" class='l'>
  <img src='https://i.imgur.com/dp8G9Fr.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='s'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='s'>
    <img src='https://i.imgur.com/AXUJEUS.jpg' class='s'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/dp8G9Fr.jpg' class='m'>
    <img src="https://i.imgur.com/ydfYXqh.jpg" class='m'>
  </section>
  <img src='https://i.imgur.com/ydfYXqh.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='m'>
    <img src='https://i.imgur.com/ydfYXqh.jpg' class='m'>
  </section>
  <img src='https://i.imgur.com/DrEwPH0.jpg' class='l'>
  <img src='https://i.imgur.com/MEPxbq4.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='m'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='m'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='s'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='s'>
    <img src='https://i.imgur.com/dp8G9Fr.jpg' class='s'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='m'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='m'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/ydfYXqh.jpg' class='s'>
    <img src="https://i.imgur.com/AXUJEUS.jpg" class='s'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='s'>
  </section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：