CODEWITHSUNDEEP
jquerytraversal
Scott Yu - builds stuff
Scott Yu - builds stuff

Reputation: 11763

jquery traversing and tables

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.

Upvotes: 2

Views: 837

Answers (4)

Adam Kiss
Adam Kiss

Reputation: 11859

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 :]

Upvotes: 0

user113716
user113716

Reputation: 322462

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.

Upvotes: 1

pixeline
pixeline

Reputation: 17974

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>

Upvotes: 0

czarchaic
czarchaic

Reputation: 6318

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

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

Upvotes: 2

Related Questions