CODEWITHSUNDEEP
javascriptjquery
John
John

Reputation: 63

Help with getting element with jQuery

I posted a similar question and it got answered correctly but it wasn't really what I was after (my bad).

Let's say I have the HTML:

<TD nowrap="true" valign="top" width="190px" class="ms-formlabel">
<H3 class="ms-standardheader">
        <nobr>Islands</nobr>
    </H3></TD>
        <TD valign="top" class="ms-formbody">
            <span dir="none"><table>
            <tr><td><span class="ms-RadioText" title="Tasmania"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl00" /><label for="...">Tasmania</label></span></td>
            </tr><tr><td><span class="ms-RadioText" title="Greenland"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl01" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl01" /><label for="...">Greenland</label></span></td>
            </tr><tr><td><span class="ms-RadioText" title="Hawaii"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl02" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl02" /><label for="...">Hawaii</label></span></td>
            </tr>
            </table></span>
</TD>
<TD nowrap="true" valign="top" width="190px" class="ms-formlabel">
<H3 class="ms-standardheader">
        <nobr>Countries</nobr>
    </H3></TD>
        <TD valign="top" class="ms-formbody">
            <span dir="none"><table>
            <tr><td><span class="ms-RadioText" title="Australia"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl00" /><label for="...">Australia</label></span></td>
            </tr><tr><td><span class="ms-RadioText" title="Greece"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl01" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl01" /><label for="...">Greece</label></span></td>
            </tr><tr><td><span class="ms-RadioText" title="UK"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl02" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl02" /><label for="...">UK</label></span></td>
            </tr>
            </table></span>
</TD>

Depending on which Island is selected I want to hide/show some other fields: 

$("input[name=ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons]:radio").change(function() {
        var title = $(this).next().text();
        if(title == "Tasmania")
        {
            $('nobr:contains("Extra column")').closest('tr').hide();
        }
        else
        {
            $('nobr:contains("Extra column")').closest('tr').show();
        }
    });

which works and with the other radio button group I want to hide/show elements based on what country is selected. I prefer to not use these long id's and the closest unique identifier for the group is what's between the tags, i.e. 

<nobr>Islands</nobr>
<nobr>Countries</nobr>

I started with trying to get the name for the radio button groups into variables but had no luck

var rb1 = $('nobr:contains("Extra column")').parent().parent().next().children().children().children().attr('id');
alert(rb1);

but I don't get the popup (code after executes successfully), how would you get the radio button group name by starting at Islands?

Thanks in advance.

Upvotes: 2

Views: 1691

Answers (2)

gislikonrad
gislikonrad

Reputation: 3571

If you want to shorten your selector, you can use the endswith selector...

$("input[name$=RadioButtons]:radio")

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

$("nobr").closest("td").next().find("input:radio") should do it

Upvotes: 0

Related Questions