使用 Jquery 添加 div

Posted 2023-05-09

【中文标题】使用 Jquery 添加 div

【英文标题】：Add div using Jquery

【发布时间】：2015-10-20 18:58:57

【问题描述】：

我想在图像前面使用 JQuery 添加此 div，我将使用图像的 alt 属性找到它，因为图像位于滑块内。图像没有#id。我正在使用 wordpress。

<div>
<h2>SEO</h2>
<span>Conquer the SEO</span>
<a class="btn" title="Read More" href="#">Read More</a>
</div>

我的滑块 html：

<div id="P_MS55ad3a788b28c" class="master-slider-parent msl ms-parent-id-5"  >


    <div id="MS55ad3a788b28c" class="master-slider ms-skin-light-6 round-skin" >

        <div  class="ms-slide" data-delay="3" data-fill-mode="fill"  >
            <img src="http://localhost/inncha/wp-content/plugins/master-slider/public/assets/css/blank.gif"  title="" data-src="http://localhost/inncha/wp-content/uploads/2015/06/06.jpg" />


        <div class="ms-thumb" ><div class="ms-tab-context"><div class=&quot;ms-tab-context&quot;></div></div></div></div>
                    <div  class="ms-slide" data-delay="3" data-fill-mode="fill"  >
                        <img src="http://localhost/inncha/wp-content/plugins/master-slider/public/assets/css/blank.gif"  title="" data-src="http://localhost/inncha/wp-content/uploads/2015/05/011.jpg" />


        <div class="ms-thumb" ><div class="ms-tab-context"><div class=&quot;ms-tab-context&quot;></div></div></div></div>
                    <div  class="ms-slide" data-delay="3" data-fill-mode="fill"  >
                        <img src="http://localhost/inncha/wp-content/plugins/master-slider/public/assets/css/blank.gif"  title="" data-src="http://localhost/inncha/wp-content/uploads/2015/05/021.jpg" />


        <div class="ms-thumb" ><div class="ms-tab-context"><div class=&quot;ms-tab-context&quot;></div></div></div></div>
                    <div  class="ms-slide" data-delay="3" data-fill-mode="fill"  >
                        <img src="http://localhost/inncha/wp-content/plugins/master-slider/public/assets/css/blank.gif"  title="" data-src="http://localhost/inncha/wp-content/uploads/2015/05/05.jpg" />


        <div class="ms-thumb" ><div class="ms-tab-context"><div class=&quot;ms-tab-context&quot;></div></div></div></div>

    </div>


</div>

【问题讨论】：

请提供滑块 HTML... 您的场景有一些缺陷，您实际上需要图像容器元素（或创建新元素） - 因为 div 位置...。

【参考方案1】：

如果你发布了你的 HTML 会更容易回答这个问题，但我会尽力而为。

找到目标图像后，您可以使用.position() 计算其位置。然后我会克隆一个隐藏的<div>，附加到图像的父级，并将其绝对定位在图像顶部的指定位置。

$(function() 
  //find the target image
  var image = $('[]');
  
  //save the position
  var position = image.position();
  
  //target the first instance of your hidden div, position it, add opacity, and append to the parent
  $(".seo").eq(0).clone().show().css(
    position: "absolute",
    top: position.top,
    left: position.left,
    opacity: 0.9
  ).appendTo(image.parent());
);

.seo  display : none 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="seo">
  <h2>SEO</h2>
  <span>Conquer the SEO</span>
<a class="btn" title="Read More" href="#">Read More</a>
</div>

<img src="http://placehold.it/350x150"  />

【讨论】：

你的速度非常快。谢谢戴夫。这行得通，但我希望 div 位于每张幻灯片的顶部（在 z-axel 中的顶部含义 -> 在前面可能更正确（我会在顶部更正它）

你运行了 sn-p 吗？ div 位于图像的前面。

对不起我的错误。我也包含了最后一个 img 标签。 div 位于所有幻灯片图像的顶部。我想我必须把它放在滑块的 php 中才能正常工作

我更改了类名，忘记在 div 上更改它，这就是它不起作用的原因！感谢您的帮助，戴夫！