使用 Jquery 添加 div

Question

我想在图像前面使用 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" alt="" 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" alt="facebook" 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" alt="Ιστοσελίδες" 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" alt="εταιρική ταυτότητα" 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>

Answer 1

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

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

$(function() {
  //find the target image
  var image = $('[alt="My 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" alt="My Image" />