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

时间:2009-05-06 15:36:07

标签: javascript jquery html dom

我使用jQuery从一些网站获取预先存储的元素的值,使用如下路径:

  

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

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

  

/ HTML /体/ DIV /中心/ DIV / DIV [3] / DIV /表/ tbody的/ TR [5] / TD / DIV /表/ tbody的/ TR / TD /表/ tbody的/ TR / TD /表/ TBODY / TR [3] / TD

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

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

所以我的问题是:

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

如果问题不明确,请问我,我会尽力解释更多。

4 个答案:

答案 0 :(得分:8)

我不知道为什么有这么多答案你正在使用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样式的seclector意思是找到一个id为colorSwatchContent的元素的所有后代span元素。由于html中的id是唯一的identitfiers,因此这与您可以获得的具体相同。

$("#colorSwatchContent > span")只会选择DIRECT后代(即时儿童)

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

答案 1 :(得分:1)

为了在有许多匹配时抓取一个特定元素,你应该给出元素类,例如给每个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');

希望这能让你以正确的方式前进。

有一点需要注意,如果你有非常复杂的表结构,你可能想重新考虑它是否需要在表中。

答案 2 :(得分:0)

tr [5]并不意味着有5个(可能有10个!),这意味着它正在选择第5个。

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

如果你能控制HTML,选择特定元素的最简单方法就是给它一个id ......在你的第一个例子中,

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

等同于

#colorSwatchContent SPAN

答案 3 :(得分:0)

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

只需在firebug中浏览源代码,右键单击任何元素,然后选择copy xpath。