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

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

HTML正文#bodyContainer#mainContentContainer#mainContent#productContentRight#样例内容#colorSwatchContent SPAN

当网站页面包含表格且在另一个类似路径中存在相同元素时，我面临的问题如下：

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

在最后一条路径中，您可以看到有5个

tr

，这意味着可以在另一条路径中找到相同的元素

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

所以我的问题是：

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

---

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

tr[5]并不意味着有5个tr（可能有10个！），它意味着它正在选择第5个tr

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

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

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

相当于

#colorSwatchContent SPAN

---

tr[5]并不意味着有5个tr（可能有10个！），它意味着它正在选择第5个tr

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

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

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

相当于

#colorSwatchContent SPAN

---

为了在有许多匹配元素时获取一个特定元素，您应该给元素类，例如给每个

表
一个描述其中内容的类，然后给每个
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>

希望这能让你走上正确的道路

需要注意的一点是，如果您有非常复杂的表结构，您可能需要重新考虑它是否需要在表中。
为了在有多个匹配元素时获取一个特定元素，您应该给元素类，例如给每个
表
一个描述其中内容的类，然后给每个
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支持xpath，您可以使用firebug获取特定的xpath，然后在jQuery中使用它

只需在firebug中浏览源代码，右键单击任意元素，然后选择复制xpath。
由于jQuery支持xpath，您可以使用firebug获取特定的xpath，然后在jQuery中使用它

只需在firebug中浏览源代码，右键单击任意元素，然后选择复制xpath。
我不知道为什么会有这么多答案让您使用xpath，因为xpath很久以前就被弃用了，如果没有xpath兼容性插件，jQuery将不再支持它

参见1.2的发行说明：

XPath兼容性插件：

只需使用
$（“#colorSwatchContent span”）
作为选择器。这是一个css样式的选择器，意味着查找id为colorSwatchContent的元素的所有子代span元素。因为html中的id是唯一的标识符，所以这是尽可能具体的

$（“#colorSwatchContent>span”）
将仅选择直接子代（直接子代）

$（“#colorSwatchContent>span:first”）
将选择第一个span直接后代
我不知道为什么会有这么多答案让您使用XPath，因为XPath很久以前就被弃用了，没有XPath兼容性插件，jQuery不再支持它

参见1.2的发行说明：

XPath兼容性插件：

只需使用
$（“#colorSwatchContent span”）
作为选择器。这是一个css样式的选择器，意味着查找id为colorSwatchContent的元素的所有子代span元素。因为html中的id是唯一的标识符，所以这是尽可能具体的

$（“#colorSwatchContent>span”）
将仅选择直接子代（直接子代）

$（“#colorSwatchContent>span:first”）
将选择第一个span直系后代
是的，确定给它一个ID将解决所有问题，但我所说的页面无法更改其HTMLS使用您需要的附近的现有ID并从那里进行隧道-该文档上的某些内容已修复是的，确定给它一个ID将解决所有问题，但是我所说的页面不能改变它的HTMLS，所以在你需要的地方使用一个现有的id，然后从那里通过隧道——这个文档上的某些东西是固定的