jQuery.wrap带有div但不执行任何操作的HTML元素

问题描述 投票：-1回答：2

假设有一个复杂的网站有很多样式等。该网站上还有许多图像可以定位，内联，阻止或其他任何方式。

我想要做的是在每个图像上方放置一个叠加图标！

第一次尝试是为身体末端的每个图像的每个图像图标创建一个position:absolute span，并将其移动到图像上。问题：如果网站上的某些内容移动，隐藏或显示，那么图像可能也会移动，但图标叠加将保持不变，因此图标不再位于图像上方。

因此，我想使用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;
}
javascript jquery css dom jquery-wrap
2个回答
0
投票

不要使用块级元素，它有可能弄乱你的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" />')
        )
    );
});

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

0
投票

在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应该.wrap()围绕<figure class="frame"> .each() <img>并插入<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.