используя jquery ближайший, чтобы выбрать первое <td>значение

Question

Я использую таблицы данных jquery для генерации таблиц html. Я установил обратный вызов, чтобы создать дополнительный столбец для ссылок (редактировать, удалять и т. Д.).

Я установил функцию привязки для обнаружения щелчков, которая работает.

Проблема, с которой я сталкиваюсь, заключается в выборе текста / значения первого столбца в ближайшей строке при его нажатии.

Вот фрагмент, который привязывается к классу и обнаруживает щелчок.

$(".drop").bind('click', function(e)  
{  
   var val = $(e.target).closest('td:first').text();  
   alert(val);                             
});

Тело таблицы HTML после генерации

<tbody>
            <tr class="odd">
                <td>doug@thisisatest.org</td>

                <td>doug@email.com</td>

                <td>1000012342015292781</td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="even">
                <td>cameron@email.com</td>

                <td></td>

                <td></td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="odd">
                <td></td>

                <td>jeniper@yay.com</td>

                <td>1734001234268</td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="even">
                <td>test@iaretester.com</td>

                <td></td>

                <td></td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="odd">
                <td></td>

                <td>dou@blah.com</td>

                <td>10000201142345292781</td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="even">
                <td>delze@tester.net</td>

                <td></td>

                <td></td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="odd">
                <td>boo@boo.com</td>

                <td></td>

                <td></td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="even">
                <td>petroz@ouch.com</td>

                <td>petroz@test.com</td>

                <td>100000723143211905</td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="odd">
                <td>helze@arg.com</td>

                <td></td>

                <td></td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="even">
                <td></td>

                <td>cameron@test.com</td>

                <td>8197906212343</td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>
        </tbody>

Answer 1

Это должно сделать это:

var val = $(e.target).closest('td').siblings(':first-child').text();  

Демонстрационная версия: http://jsfiddle.net/simevidas/JZwxD/