How can I get the value of a <td> from the clicked event of a previous <td> with jQuery?

Question

I have the following HTML:

<tr>
    <td class="ui-widget-content">
        <a title="Edit" href="/Administration/Menus/Edit/001W"
           class="editLink ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"
            role="button">
            <span class="ui-button-text">Edit</span>
        </a>
    </td>
    <td class="ui-widget-content">001W</td>
</tr>

To the editLink class I apply the following:

$('.editLink')
              .button({ icons: { primary: "ui-icon-clipboard"} })
              .removeClass('ui-button-text-icon-primary')
              .addClass('ui-button-icon-only')
              .click(function () {
                  editClick(this);
                  return false;
               });

Is there a way that I can make it so I call the editClick function with the value of the following <td> as a second argument?

So for example in this case it would be the same as calling editClick(this,"001W")

Answer 1

Yep.

You can use $(this).closest('td').next().text() to do that.

See closest(), next() and text() in the jQuery documentation.

You could also use $(this).parent().next().text() if you can guarantee the DOM structure of the td's, but I'd prefer the use of closest() to make it more versatile.

Answer 2

You need to use $(#firsttd_id).next() only walks the DOM.