无法使用 jquery 正确遍历

Question

我想简单地向上遍历以找到父元素并在其周围包裹一个 a。

这是我目前所拥有的：

$(".product_thumbnail a").each(function() {
    var hrefsrc = $(this).attr('href');
    console.log(hrefsrc);

    $(this).parent('.animate').wrap('<a href="'+hrefsrc+'"></a>');
});

这是 HTML 结构：

<ul id="someIDs">
<li class="animate">
    <div class="product_thumbnail_wrapper ">
        <div class="product_thumbnail ">
            <a href="url">
                <span class="product_thumbnail_background" style=""></span>
                <img width="300" height="300" src="url" />
            </a>
        </div>
</li>
</ul>

无法弄清楚如何正确触发正确的元素。 我尝试了以下方法：

最近的()

父母（）

父母（）

parentsUntil 表明包装是可能的。 我还阅读了 jQUery 遍历文档，但这并没有太大帮助。

感谢您的帮助！

Answer 1

因为 li.animate 元素不是 a 元素的直接父元素，所以您不能使用 parent 并且您需要使用 parents 函数，但是 - 并不是它会给您所有的父元素向上 DOM 树。

如果你没有超过 1 个应该没问题，但如果你这样做了，它将无法按你的意愿工作。

这是对您的代码的修复，但您确实应该更改它，以便最终输出是有效的 HTML 结构。

$(".product_thumbnail a").each(function() {
    var hrefsrc = $(this).attr('href');
    $(this).parents('.animate').wrap('<a href="'+hrefsrc+'"></a>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="someIDs">
  <li class="animate">
      <div class="product_thumbnail_wrapper ">
          <div class="product_thumbnail ">
              <a href="url">
                  <span class="product_thumbnail_background" style=""></span>
                  <img width="300" height="300" src="url" />
              </a>
          </div>
      </div>
  </li>
</ul>

同样重要 - 请注意 <a> 是内联块元素，不应包装阻塞元素（例如 <div>）。另一个问题是 <ul> 元素应该只有 <li> 子元素（而不是 <a> - 就像你正在做的那样）。

您可以做的是将<a> 元素更改为onclick li 上的函数：

$(".product_thumbnail a").each(function() {
    var hrefsrc = $(this).attr('href');
    $(this).parents('.animate').click(function() {
      window.location = hrefsrc;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="someIDs">
  <li class="animate">
      <div class="product_thumbnail_wrapper ">
          <div class="product_thumbnail ">
              <a href="url">
                  <span class="product_thumbnail_background" style=""></span>
                  <img width="300" height="300" src="url" />
              </a>
          </div>
      </div>
  </li>
</ul>

它会以同样的方式工作，并且现在的结构是有效的。