如何使用jQuery選擇器獲取此元素？

Question

我使用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 / table / tbody / tr [3] / td

如您所見，在最后一條路徑中有5 tr ，這意味着可以在另一條路徑中找到相同的元素。

我使用路徑作為jQuery的選擇器，並且jQuery將返回元素數組，但我不知道哪一個是正確的元素。

所以我的問題是：

如何保存路徑以便以后使用？ 以及如何解析此新路徑以用作jQuery選擇器。

如果問題不清楚，請問我，我將盡力解釋更多。

Answer 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的元素的所有后代span元素。 由於html中的id是唯一的標識符，因此您將獲得盡可能具體的ID。

$("#colorSwatchContent > span")將僅選擇DIRECT后代（有近代的孩子）

$("#colorSwatchContent > span:first")將選擇第一個span直接后代

Answer 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');

希望這能使您正確地前進。

需要注意的一件事是，如果您具有非常復雜的表結構，則可能需要重新考慮它是否需要在表中。

Answer 3

tr [5]並不意味着有5個trs（可能有10個！），這意味着它正在選擇第5個。

在我看來，您正在使用XPath選擇器來獲取元素... jQuery支持。

如果您可以控制HTML，則選擇特定元素的最簡單方法是為其指定一個ID ...在第一個示例中，

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

等同於

#colorSwatchContent SPAN

Answer 4

由於jQuery支持xpath，因此您可以使用firebug獲取特定的xpath，然后在jQuery中使用它。

只需在firebug中瀏覽源代碼，右鍵單擊任何元素，然后選擇copy xpath。