我无法将 DOM 从 <img> 遍历到 <td> ...？

Posted 2023-05-09

【中文标题】我无法将 DOM 从 <img> 遍历到 <td> ...？

【英文标题】：I'm unable to traverse the DOM from an <img> to a <td>...?

【发布时间】：2012-02-20 19:48:47

【问题描述】：

概述

非常感谢您对此提供的任何帮助。我确定这很“容易”，但我无法弄清楚。我必须使用选择器来选择唯一的图像文件名。然后，我需要替换<td>，它是<img> 所在的<td> 右侧的一列。

我有当前的网站，我还制作了一个图表来帮助更好地解释这一点。检查以下两个链接： 网址：http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks 图：http://goo.gl/Q3Uif

问题

上述网站的链接没有问题。我们在 oscommerce 中进行了“特许经营”自定义修改。只有拥有特定帐户的客户才能登录我需要帮助的地方。我制作的图表描述了它，很简单。就这样你拥有了我的“拼图”的所有“碎片”，这就是我为主站点做.replaceWIth() 的方式。此示例适用于顶行...我需要修改的每一行都有一个。

 $("a[href$=/Premium-Security-Laser-Check].smallTextLink").parent()
 .replaceWith('<td class="productListing-data" style="border-left:1px solid #FFF; border-top:1px solid #FFF; border-bottom:1px solid #808080; border-right:1px solid #808080;"><div class="leftSide"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="smallTextLink">Premium Security Laser Check</a><ul style="line-height: 1.5em; font-size: 11px; margin-left: -15px;"><li style="color:red;"><strong>Buy 500 Checks, Get 500 Free Special!</strong></li><li>More than 8 security features</li><li>Thermochromic Ink</li><li>8.5" x 11" sheet 24lb MICR paper</li><li>2 perforations @ 3.5" x 7"</li></ul><div class="moreInfoButtonsNew"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="positive"><img src="http://writeguard.com/catalog/images/new_layout/icons/information.png" />More Info</a></div></div><div class="rightSide"><p class="ourPrice">Starting At:<br>$39.50</p></div></td>');

我认为这根本没有效率。但就我现在遇到的这个问题而言，我需要能够做我在顶部描述的事情。通过文件名选择<img>，然后导航DOM，这样我就可以使用.replaceWith() 来实现我上面描述的相同的事情。我尝试了很多不同的选择器，但它们都不起作用。它总是最终在表格数据中的表格数据中生成表格数据，直到页面实际上是 10 英尺长。我不知道我哪里出错了。

如有必要，我很乐意提供更多详细信息。我显然对 jQuery 不是很有经验，而且我的方法可能是一场噩梦。我想尽快学习使用 jquery 编程的正确、有效的方法。非常感谢您的帮助！

【参考方案1】：

选择器应该是：

$('a.smallTextLink[href$="Premium-Security-Laser-Check"]')

你的表结构，你有：

<tr>
  <td>
    <div>
      <a href='....'>
      ..
      ..

因此，您的 jQuery 语句需要找到作为 td 的父级。 parent() 正在返回 div。您希望 parents('td:first') 获取第一个 td 元素的父级。

$('a[href$="Premium-Security-Laser-Check"].smallTextLink').parents('td:first')
  .replaceWith(....)

【讨论】：

非常感谢您的帮助。我已经不在办公室，但会尽快尝试。似乎它应该工作！再次感谢！！

【参考方案2】：

我认为问题出在您的选择器上。

我不相信$("a[href$=/Premium-Security-Laser-Check].smallTextLink") 真的会抢到任何东西。

试试这个：

$('a.smallTextLink[href$="Premium-Security-Laser-Check"]').click(function()

    alert('clicked the security laster check small text link');
);

如果可行，那么您应该可以只更改您的选择器并让您的替换为工作。

$('a.smallTextLink[href=/Premium-Security-Laser-Check]').parent() .replaceWith('<td class="productListing-data" style="border-left:1px solid #FFF; border-top:1px solid #FFF; border-bottom:1px solid #808080; border-right:1px solid #808080;"><div class="leftSide"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="smallTextLink">Premium Security Laser Check</a><ul style="line-height: 1.5em; font-size: 11px; margin-left: -15px;"><li style="color:red;"><strong>Buy 500 Checks, Get 500 Free Special!</strong></li><li>More than 8 security features</li><li>Thermochromic Ink</li><li>8.5" x 11" sheet 24lb MICR paper</li><li>2 perforations @ 3.5" x 7"</li></ul><div class="moreInfoButtonsNew"><a href="http://www.writeguard.com/catalog/Checks/LaserInkjet-Checks/Premium-Security-Laser-Check" class="positive"><img src="http://writeguard.com/catalog/images/new_layout/icons/information.png" />More Info</a></div></div><div class="rightSide"><p class="ourPrice">Starting At:<br>$39.50</p></div></td>');

【讨论】：

选择器应该写成：$('a[href$="Premium-Security-Laser-Check"].smallTextLink') 或 $('a.smallTextLink[href$="Premium -安全-激光检查"]')。你拥有的那个不起作用。

非常感谢您的回复！我一直不在办公室，但会尝试我收到的建议并发布有效的建议。再次，非常感谢。谢谢！