How do I get this element using jQuery selectors?
I am using jQuery to get the values of given elements from some websites using the following paths:
HTML BODY #bodyContainer #mainContentContainer #mainContent #productContentRight #swatchContent #colorSwatchContent SPAN
The problem I am facing is when the websites page contains tables and there is the same element in another similar path, for example:
/ 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, since you can see that there are 5 tr
, which means it can find the same item in a different path.
I am using path as a selector for jQuery and jQuery will return an array of elements, I don't know which one is the correct element.
So my question is:
How do I save the path for later use? and how to parse this new path to be ready as a jQuery selector.
If the question is not clear, ask me and I will do my best to explain more.
a source to share
I don't know why there are so many answers that you are using XPath, because XPath has long been deprecated and jQuery no longer supports it without the XPath compatibility plugin.
See release notes 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 it $("#colorSwatchContent span")
as your selector. Which is a css style sequencer, which means I find all subsequent span elements of an element with id colorSwatchContent. Since id's in html are unique identifiers, this is about as specific as you can get.
$("#colorSwatchContent > span")
will only select DIRECT descendents (immediate children)
$("#colorSwatchContent > span:first")
will select the first direct direct child
a source to share
To capture one specific element when there are many such matches, you should give the element classes, for example, give each a table
class describing what's in it, then give each a tr
class describing what the string is about. Then each td
with a class describing the specific part of the line 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've described your elements correctly, you can use CSS style selectors in jQuery. for example, getting only td
one that has a home phone would be as easy as doing:
$('table.person tr.home-phone td.number');
Hope this gets you on the right track.
One note: if you have incredibly complex table structures, you might want to rethink if it should be in the table or not.
a source to share
tr [5] does not mean there are 5 trs (maybe 10!), it means that it chooses the fifth one.
It looks to me like you are using an XPath selector to get your elements ... which jQuery supports.
if you have control over 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
equivalent to
#colorSwatchContent SPAN
a source to share