Как совместить элемент, созданный другим элементом. Понимание иерархии

Question

У меня есть таблица динамически генерируемый запрос MySQl как это:

| title | Published |  Delete  | 
--------------------------------------------- 
| Review_1 | Yes  | click_to_delete | 
| Review_2 | Yes  | click_to_delete | 
| Review_3 | Yes  | click_to_delete | 

Каждая строка таблицы устроятся - например - с помощью следующего кода (ID 1 только для примера):

<tr> 
    <td><a class="editlink" id="1" href="#">Review_1</a><td> 
    <td><input type="checkbox" /></td> 
    <td><a class="delete_review" id="1" href="#"><img src="remove.png"/></a></td> 
</tr> 

Я бы хотел, чтобы при нажатии пользователем - например, первая ссылка «click_to_delete» появляется всплывающее сообщение о том, что он собирается удалить обзор «Review_1».

Так что я хочу получить ТЕКСТ ссылки Review_1, когда пользователи нажимают на соответствующий 'click_to_delete'.

Я попытался с помощью следующего кода:

$(".delete_review").click(function() { 
    var index = $(".editlink").index(this); 
    var item_name = $(".editlink").eq(index).text(); 
    alert(item_name); 
} 

Я не понимаю, почему эта строка возвращает правильно положение элемента

var index = $(".editlink").index(this); 

пока этот человек не возвращает текст из ссылка:

var item_name = $(".editlink").eq(index).text(); 

конечно $ (это) не пригодится в этом случае, потому что событие не запускается одним и тем же элементом.

Answer 1

Вы можете пройти через DOM дерева вверх к td элементу с помощью closest (или parent, но имейте в виду, что это будет потом перерыв, если вы случайно добавить больше элементов между ними), а затем использовать siblings и eq, чтобы получить первый родственный:

var item_name = $(this).closest("td").siblings().eq(0).text(); 

метод index возвращает индекс элемента относительно своих братьев и сестер. В вашем случае ссылка не имеет братьев и сестер, поэтому индекс всегда должен быть 0.

Answer 2

Попробуйте вместо этого использовать методы обхода DOM.

Например:

$(".delete_review").click(function() { 
    var item_name = $(this).closest('tr').find('.editlink').text(); 
    alert(item_name); 
} 

Answer 3

Я сделал простой пример здесь:

http://jsfiddle.net/yX94V/