How to get this element using jQuery selectors?

Question

I use jQuery to get values of presaved elements from some websites, using paths like this:

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

The problem i faced when the websites page contains tables and there are same element in another similar path such as:

/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

In the last path as you can see that there are 5 tr which means that its possible to find the same element in another path.

I use the path as a selector for jQuery and jQuery will return array of elements, i don't know which one is the right element.

So my question is:

How to save the path for better later use? and how to parse this new path to be ready as a jQuery selector.

If the question is not clear please ask me and i will do my best to explain more.

Answer 1

I don't know why there are so many answers that you are using XPath because XPath was deprecated a long time ago and jQuery no longer supports it without the XPath compatibility plugin.

See Release Notes of 1.2 : http://www.learningjquery.com/2007/09/upgrading-to-jquery-12

XPath compatibility plugin : http://docs.jquery.com/Release:jQuery_1.2#XPath_Compatibility_Plugin

Just use $("#colorSwatchContent span") as your selector. Which is a css style seclector meaning find me all descendent span elements of an element with id colorSwatchContent. Since id's in html are unique identitfiers, this is about as specific as you can get.

$("#colorSwatchContent > span") will only select DIRECT descendents (immedieate children)

$("#colorSwatchContent > span:first") will select the first span direct descendent

Answer 2

In order to grab one specific element when there are many that match you should give the elements classes, for example give each table a class describing what is in it, then give each tr a class describing what the row is about. Then each td with a class describing the specific part of the row that it describes, for example:

<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>

Once you have your elements properly described then you can use CSS style selectors in jQuery. for example getting just the td that has the home phone would be as simple as doing:

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

Hope this gets you heading the right way.

One thing to note tho, If you have incredibly complex table structures you might want to rethink whether it needs to be in a table or not.

Answer 3

tr[5] doesn't mean there are 5 trs (there could be 10!), it means that it is selecting the 5th one.

It looks to me like you are using an XPath selector to get your elements... which jQuery supports.

if you have control of the HTML, the easiest way to select a specific element is to give it an id... which in your first example,

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

is equivilant to

#colorSwatchContent SPAN

Answer 4

Since jQuery supports xpath you could use firebug to get the specific xpath, and then use that in jQuery.

Just browse the source in firebug, right click any element, and then choose copy xpath.