Question

我正在尝试将<h3>标题附加到页面上的每个et_overlay范围内。这是一个例子： -

<li class="product">
    <a href="https://foo.com/product/foo">
        <span class="et_shop_image">
            <img width="400" height="400" src="https://foo.com/wp-content/uploads/foo.jpg" class="attachment-shop_catalog" alt="Alt text" title="Product Title">
            <span class="et_overlay"></span>
        </span>
        <h3>Product Title Goes here</h3>
    </a>
</li>

我正在使用的jQuery是： -

  /*Add product on-hover information*/
  $("li.product h3").each(function() {
    var $this = $(this);
    $this.closest("span.et_overlay").append($this.clone());
  });

我感觉我很接近，但<h3>文字没有按指定附加。

Answer 1

试试这个：

$("li.product").each(function(i,e) {
    $(e).find(".et_overlay").append($(e).find('h3').clone());
});

Answer 2

您不希望在.closest()中使用$this.closest("span.et_overlay").append($this.clone());，因为.closest()遍历DOM并且"span.et_overlay"不是祖先。而是使用：

$this.prev('span.et_shop_image').find("span.et_overlay").append($this.clone());

$("li.product h3").each(function() {
  var $this = $(this);
  $this.prev('span.et_shop_image').find("span.et_overlay").append($this.clone());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="product">
    <a href="https://foo.com/product/foo">
      <span class="et_shop_image">
            <img width="400" height="400" src="https://foo.com/wp-content/uploads/foo.jpg" class="attachment-shop_catalog" alt="Alt text" title="Product Title">
            <span class="et_overlay"></span>
      </span>
      <h3>Product Title Goes here</h3>
    </a>
  </li>
</ul>

将图像标题附加到最近的覆盖范围

2 个答案: