无法使用 jquery 正确遍历

Posted 2023-05-09

技术标签:

【中文标题】无法使用 jquery 正确遍历【英文标题】：Cant traverse up correctly with jquery 【发布时间】：2018-02-03 11:11:34 【问题描述】：

我想简单地向上遍历以找到父元素并在其周围包裹一个 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   src="url" />
            </a>
        </div>
</li>
</ul>

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

最近的()

父母（）

父母（）

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

感谢您的帮助！

【问题讨论】：

所以您正试图将超链接...包装在超链接中？这是一个非常糟糕的主意。我后来杀了它。 ;) 【参考方案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   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   src="url" />
              </a>
          </div>
      </div>
  </li>
</ul>

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

【讨论】：

根据 HTML5，您可以使用 <a> 包装块级元素；) 不再存在限制。但是，您关于<li> 必须是<ul> 的后代的观点仍然非常有效。你想要的是改用.wrapInner()。 HTML5 给了我们很多新的很棒的东西，但是当我们谈论现实时——IE11、edge、safari 和其他浏览器仍然存在问题，最终结果不会像我们想象的那样工作会:) 我很确定 IE9 在遇到 <!DOCTYPE html>（这是 HTML5 文档类型）时使用标准模式，所以这一点实际上是没有实际意义的。 @BillBronson 它不起作用，因为您的 li 元素没有 animate 类。这可能是另一个脚本正在添加的东西。打开页面的源代码（右键单击，查看源代码）并在该页面中搜索animate。该类没有单个 <li> 元素。你试过parents('li') 吗？

以上是关于无法使用 jquery 正确遍历的主要内容，如果未能解决你的问题，请参考以下文章

我无法选择正确的 div（使用 Jquery）

html 元素无法使用 jQuery 正确移动

无法在 Codeigniter 中使用 jquery 设置正确的图像路径

使用 JavaScript 的 Google 地图无法在 jQuery 选项卡中正确显示

jquery 在IE浏览器中无法使用find（）或children（）遍历xml数据

jQuery Datatable：分页和过滤器无法正确显示