Как получить этот элемент с помощью селекторов jQuery?

Question

Я использую jQuery для получения значений предварительно сохраненных элементов с некоторых веб-сайтов, используя следующие пути:

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

Проблема, с которой я столкнулся, когда страница веб-сайтов содержит таблицы, и в другом похожем пути есть такой же элемент, как:

/ HTML / тело / DIV / центр / DIV / DIV [3] / DIV / стол / TBODY / тр [5] / TD / DIV / стол / TBODY / TR / TD / стол / TBODY / TR / TD / таблица / TBODY / тр [3] / тд

На последнем пути, как вы можете видеть, есть 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, что означает найти все дочерние элементы span элемента с идентификатором colorSwatchContent. Поскольку идентификаторы в html являются уникальными идентификаторами, это примерно так же конкретно, как вы можете получить.

$("#colorSwatchContent > span") будет выбирать только ПРЯМЫХ потомков (непосредственные дети)

$("#colorSwatchContent > span:first") выберет первый отрезок прямого потомка

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>

Как только вы правильно описали свои элементы, вы можете использовать селекторы стилей CSS в jQuery. например, получить только td с домашним телефоном так же просто, как сделать:

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

Надеюсь, это заставит вас двигаться в правильном направлении.

Стоит отметить, что если у вас невероятно сложные структуры таблиц, вы можете переосмыслить, должна ли она быть в таблице или нет.

Answer 3

Поскольку jQuery поддерживает xpath, вы можете использовать firebug для получения определенного xpath, а затем использовать его в jQuery.

Просто просмотрите источник в firebug, щелкните правой кнопкой мыши по любому элементу и выберите «Копировать xpath».

Answer 4

tr [5] не означает, что есть 5 trs (может быть 10!), Это означает, что он выбирает 5-й.

Мне кажется, что вы используете селектор XPath для получения своих элементов ... которые поддерживает jQuery.

если у вас есть контроль над HTML, самый простой способ выбрать определенный элемент - дать ему идентификатор ... который в вашем первом примере,

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

эквивалентно

#colorSwatchContent SPAN