Question

我想简单地向上遍历以找到父元素并围绕它进行包装。

这是我到目前为止所拥有的：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

它的工作方式相同，现在结构有效。

无法使用jquery正确遍历

1 个答案: