如何使用 jQuery 选择器获取此元素？答案

【问题标题】：How to get this element using jQuery selectors?如何使用 jQuery 选择器获取此元素？
【发布时间】：2010-10-24 05:35:15
【问题描述】：

我使用 jQuery 从一些网站获取预先保存的元素的值，使用如下路径：

HTML 正文 #bodyContainer #mainContentContainer #mainContent #productContentRight #swatchContent #colorSwatchContent SPAN

当网站页面包含表格并且在另一个相似路径中存在相同元素时遇到的问题，例如：

/html/body/div/center/div/div[3]/div/table/tbody/tr[5]/td/div/table/tbody/tr/td/table/tbody/tr/td/表/tbody/tr[3]/td

在最后一条路径中，您可以看到有 5 个tr，这意味着它可以在另一条路径中找到相同的元素。

我使用路径作为 jQuery 的选择器，jQuery 将返回元素数组，我不知道哪个是正确的元素。

所以我的问题是：

如何保存路径以备后用？以及如何解析这个新路径以准备好作为 jQuery 选择器。

如果问题不清楚，请问我，我会尽力解释更多。

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

我不知道为什么有这么多答案说你在使用 XPath，因为 XPath 很久以前就被弃用了，而且 jQuery 在没有 XPath 兼容性插件的情况下不再支持它。

请参阅 1.2 的发行说明：http://www.learningjquery.com/2007/09/upgrading-to-jquery-12

XPath 兼容性插件：http://docs.jquery.com/Release:jQuery_1.2#XPath_Compatibility_Plugin

只需使用$("#colorSwatchContent span") 作为您的选择器。这是一个 css 风格的选择器，意思是找到一个 ID 为 colorSwatchContent 的元素的所有后代跨度元素。由于 html 中的 id 是唯一标识符，因此这是您可以得到的最具体的。

$("#colorSwatchContent > span") 只会选择 DIRECT 后代（直系子女）

$("#colorSwatchContent > span:first") 将选择第一个跨度直接后代

【讨论】：

【解决方案2】：

为了在有许多匹配的元素时抓取一个特定元素，您应该为元素提供类，例如给每个table 一个描述其中内容的类，然后给每个tr 一个描述行内容的类是关于。然后每个td 都有一个描述它所描述的行的特定部分的类，例如：

<table class="person">
    <tr class="john-doe">
        <td class="name">John Doe</td>
        <td class="phone-numbers">
            <table class="phone-numbers">
                <tr class="cell-phone">
                    <th class="label">Cell Phone:</th>
                    <td class="number">555-1234</td>
                </tr>
                <tr class="home-phone">
                    <th class="label">Home Phone:</th>
                    <td class="number">555-1234</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

一旦你正确描述了你的元素，你就可以在 jQuery 中使用 CSS 样式选择器。例如，仅获取具有家庭电话的td 就像这样做一样简单：

$('table.person tr.home-phone td.number');

希望这能让你朝着正确的方向前进。

有一点需要注意，如果您的表格结构非常复杂，您可能需要重新考虑是否需要将其放在表格中。

【讨论】：

【解决方案3】：

tr[5] 并不是说有 5 个 trs（可能有 10 个！），它表示它正在选择第 5 个。

在我看来，您正在使用 XPath 选择器来获取您的元素……这是 jQuery 支持的。

如果您可以控制 HTML，选择特定元素的最简单方法是给它一个 id...在您的第一个示例中，

HTML BODY #bodyContainer #mainContentContainer #mainContent #productContentRight #swatchContent #colorSwatchContent SPAN

等价于

#colorSwatchContent SPAN

【讨论】：

是的，给它一个 ID 可以解决所有问题，但是我正在谈论的页面不能更改它的 html
所以使用您需要的附近的现有 ID 并从那里隧道 - 该文档上的 something 已修复

【解决方案4】：

由于 jQuery 支持 xpath，您可以使用 firebug 获取特定的 xpath，然后在 jQuery 中使用它。

只需在 firebug 中浏览源代码，右键单击任意元素，然后选择复制 xpath。

【讨论】：