[ACCEPTED]-How to get this element using jQuery selectors?-dom

Accepted answer
Score: 10

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

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

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

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

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

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

Score: 1

In order to grab one specific element when 15 there are many that match you should give 14 the elements classes, for example give each 13 table a class describing what is in it, then 12 give each tr a class describing what the row 11 is about. Then each td with a class describing 10 the specific part of the row that it describes, for 9 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 class="home-phone">
                    <th class="label">Home Phone:</th>
                    <td class="number">555-1234</td>

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

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

Hope this gets you heading the 4 right way.

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

Score: 0

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

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

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

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

is equivilant to

#colorSwatchContent SPAN
Score: 0

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

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

More Related questions