jQuery Selector

Question

I have a fairly simple dynamic html structure of a table that contains links and the possibility that it will contain a second table with links. I would like the change the html attribute for the links in the main table but not in the second.

My structure:

<table>
<tr><td><a href="www.google.com">link</a></td></tr>
<tr><td><a href="www.google.com">link</a></td></tr>
<tr><td><a href="www.google.com">link</a></td></tr>
<tr><td><a href="www.google.com">link</a></td></tr>
<tr><td><a href="www.google.com">link</a></td></tr>
<tr>
    <td>
        <table>
            <tr><td><a href="http://stackoverflow.com">link</a></td></tr>
            <tr><td><a href="http://stackoverflow.com">link</a></td></tr>
            <tr><td><a href="http://stackoverflow.com">link</a></td></tr>
        </table>
    </td>
</tr>

So for example, I would like to change all the hrefs of "www.google.com" to "www.foo.com". I am able to change the href attribute, but I am having issues with my selector b/c there are times where the second table will not exist.

My current selector looks like: $('table a').filter(':not(table:last a)')

I'm sure it is not the most effecient way to do it, but it was working till the possibility of no second table came into play.

How do you access the first table, is there an ID or an absolute reference you can use? Is so, should be easy by using the > in a selector to prevent traversing down the tree further than expected. — Brad Christie
– Brad Christie, Commented Jan 3, 2011 at 22:12

Community · Accepted Answer · 2017-05-23 11:55:28Z

5

If your "main" table is not inside another table, you could do:

$('table a:not(table table a)')

or equivalently:

$('table a').not('table table a')

Update: Performance-wise, Patrick's answer is much better.

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Jan 3, 2011 at 22:11

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lee McCroskey Over a year ago

Thank you guys for the great answers. Im going to accept this one. It works and I can't tell who answered first you or mririgo below. Also, performance should never be an issue with this, since it is being generated dynamically, the number of rows will never be above 25.

user113716 · Accepted Answer · 2011-01-03 22:16:22Z

1

I think I'd rather do this:

$('table').slice( 0, -1 ).find( 'a' );

Find all the tables, then reduce the set to all but the last, and finally do a .find() for the <a> elements.

The reason is that I'm heavily biased toward valid CSS selectors so that querySelectorAll can be successfully utilized by jQuery.

answered Jan 3, 2011 at 22:16

user113716

323k64 gold badges454 silver badges441 bronze badges

3 Comments

user113716 Over a year ago

@Felix: Just gave an update to explain why. The :first selector fits under the category of non-valid CSS selectors. Minor consideration if there's only two tables.

Felix Kling Over a year ago

I see. Just thought it looks nicer ;) But you are right... thanks for the explanation.

user113716 Over a year ago

@Felix: Agreed, and :first is probably a worthwhile compromise in this case.

Nabab · Accepted Answer · 2011-01-03 22:15:41Z

0

You can do with your table's container.
If it's body:

$("body > table > tr > td > a")

answered Jan 3, 2011 at 22:15

Nabab

2,6641 gold badge20 silver badges34 bronze badges

Comments

Richard Marskell - Drackir · Accepted Answer · 2011-01-03 22:29:02Z

0

Try using the child selector and giving the main table an ID (if it doesn't have one already) :

$('#maintable > tbody > tr > td > a')

Where #maintable is the ID of your main table.

Edit: You'll also want to add the <tbody> tag to the table (for the reasons indicated in the comments).

This uses basic CSS selectors on newer browsers and doesn't require any jQuery magic unless you're using an older browser.

edited Jan 3, 2011 at 22:29

answered Jan 3, 2011 at 22:16

Richard Marskell - Drackir

13.4k3 gold badges37 silver badges55 bronze badges

3 Comments

user113716 Over a year ago

Be careful with using > when it comes to <table> elements. Even though there's no <tbody>, most browsers will insert one, causing your selector to fail.

Richard Marskell - Drackir Over a year ago

@patrick dw: Good point. In that case, a <tbody> could be added explicitly so that you know for sure that it's there, and then the selector would change to: $('#maintable > tbody > tr > td > a')

user113716 Over a year ago

Yes, I'm fully in favor of the explicit inclusion of <tbody> to ensure consistency across browsers.

sova · Accepted Answer · 2011-01-03 23:26:38Z

0

If you can change the dynamically-generated HTML you should really give each table an ID property:

<table id="table1"> ...
    <table id="table2"> ...
    </table>
</table>

Then your selectors can be simply

$('#table1').find('a')

This doesn't really answer your question, but this design is much more maintainable and easier to change.

answered Jan 3, 2011 at 23:26

sova

5,66811 gold badges43 silver badges51 bronze badges

Collectives™ on Stack Overflow

jQuery Selector

5 Answers 5

1 Comment

3 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related