jquery traversing and tables

Question

This problem is making me a bit crazy.

I have something like this

  <h3>Feeds
   <span><a class="smallbutton create_feed" href="javascript:;">
    <strong>Create New</strong>
    </a>
   </span>
   <span class="div_form_add_feed">
    <a class="smallbutton btn_save_feeds" href="javascript:;">
    <strong> Add </strong></a>
   </span>
   </h3>
<table cellpadding=0 cellspacing=1 class="table">
<tr><td>
<div class="get_feeds_news">test</div></td></tr></table>

I want the Add link class "smallbutton btn_save_feeds" to replace the div "get_feeds_news" with something else. But I cannot seem to traverse to it using $(this) in jQuery.

What is the right way to traverse from the Add link class "smallbutton btn_save_feeds" to change someting in the div "get_feed_news"? I tried the following but didnt work.

$(this).closest('.get_feeds_news').html('hihi');  

Is the problem because it's inside a table?

Thanks in advance.

Answer 1

you're missing the dot (plus a closing div tag)

$(this).closest('.get_feeds_news').html('hihi');

Answer 2

try fixing your html, you didn't close your get_feeds_news div:

<table cellpadding=0 cellspacing=1 class="table">
<tr><td>
<div class="get_feeds_news"></div></td></tr></table>

Answer 3

closest() will not work since the element you're searching for is not an ancestor of the button.

If get_feeds_news is the only occurrence of that class, you could simply use $('.get_feeds_news')

Otherwise, you could do something like:

$(this).closest('h3').next().find('.get_feeds_news')

jQuery has many ways to traverse. This is certainly not the only way to go about it. If your layout changes, there will be some way to accomplish what you need.

Answer 4

you can select one of two elements by

$('.get_feed_news:eq(0)')

(or 1 for second)

or, if you have 2 links smallbutton btn_save_feeds (one for each .get_feed_news), you can use:

$('.get_feed_news').eq( $(this).index() )

what basically passes index to filter .get_feed_news with index of caller :]