无法使用 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>

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

closest()

parent()

parents()

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

感谢您的帮助！

Answer 1

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

如果你没有超过 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>

Also important - note that <a> is an inline-block element and should not wrap blocking elements (such as <div>). Another issue is that <ul> elements should only have <li> child-elements (And not <a> - like what you are doing).

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

$(".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>

它将以同样的方式工作，结构现在有效。

无法使用 jquery 正确向上遍历

Cant traverse up correctly with jquery

jquery

parent

jquery-selectors

dom-traversal