Выберите первый родной брат

Question

Я пытаюсь выбрать внутреннее значение первого родного брата - с помощью jQuery - в среде, где я не могу изменить разметку html.

У меня есть следующие:

<tr> 
    <td>3</td> 
    <td>bob</td> 
    <td>smith</td> 
    <td>bob@example.com</td> 
    <td> 
     <img src="bobsmith.png" onclick="doSomething()" /> 
    </td> 
</tr> 

Я пытаюсь получить значение первого <td> со следующим:

function doSomething() { 
    var temp = $(this).parent().parent().children().filter(':first'); 
    alert("you clicked person #" + temp.html()); 
} 

Все, что я получаю от этого null.

Я также пробовал различные комбинации с функцией .siblings(), но безрезультатно.

Любые идеи?

Спасибо,

Примечание: Я забыл упомянуть, что таблица выдержка от динамически загружается & обновилась от вызова Ajax. Это может иметь значение для предложений, которые включают привязки.

Решение: Я пошел следующим раствором, вдохновленный принято отвечать:

<tr> 
    <td>3</td> 
    <td>bob</td> 
    <td>smith</td> 
    <td>bob@example.com</td> 
    <td> 
     <img src="bobsmith.png" onclick="doSomething(this)" /> 
    </td> 
</tr> 

и для JQuery JavaScript:

function startStopNode(el) { 
    var temp = $(el).parent().siblings(':first').html(); 
    alert("you clicked: " + temp); 
} 

Answer 1

$('td:first-child', $(this).parents ('tr')).html(); 

Этот выберет первый элемент TD (: фильтр первого ребенка) в родительском TR образ. parents() возвращает всех родителей элемента, и мы фильтруем родителей так, чтобы возвращались только элементы TR.

Также попробуйте написать свой образ так:

<img src="bobsmith.png" onclick="doSomething(this)" /> 

и ваша функция, как так:

function doSomething (imgEl) { 
} 

и использовать imgEl вместо this

Answer 2

$('tr td:last-child img').click(function(){ 

    alert($('td:first-child',$(this).closest('tr')).text()); 

}); 

Answer 3

Я бы создать событие, использующее jQuery, но это полностью зависит от вас.

$("table td:last img").click(function() { 
    var firstTd = $(this).parents("tr").find("td:first").html(); 
    alert("you clicked person #" + firstTd); 
}); 

Независимо от того, вы все еще можете использовать этот пример с вашим собственным кодом:

function doSomething() 
{ 
    var firstTd = $(this).parents("tr").find("td:first-child").html(); 
    alert("you clicked person #" + firstTd); 
} 

---

Вы правы. 'this' не передается, вам нужно отредактировать html, чтобы сделать эту работу. Или просто используйте jQuery вместо этого, как показано выше.

Answer 4

Возможно, это поможет кому-то. Это всего лишь часть всей статьи here.

Разница

Если вы хотите использовать это для доступа к HTML-элементу, обрабатывающее событие, вы должны убедиться, что это ключевое слово на самом деле написано в собственность OnClick. Только в этом случае он ссылается на элемент HTML, на который зарегистрирован обработчик событий. Так что если вы

element.onclick = doSomething; 
alert(element.onclick) 

вы получите

function doSomething() 
{ 
    this.style.color = '#cc0000'; 
} 

Как вы можете видеть, это ключевое слово присутствует в методе OnClick. Поэтому он относится к элементу HTML.

Но если вы

<element onclick="doSomething()"> 
alert(element.onclick) 

вы получите

function onclick() 
{ 
    doSomething() 
} 

Это просто ссылка на функцию DoSomething(). Это ключевое слово отсутствует в методе onclick, поэтому оно не относится к элементу HTML.

Answer 5

У нас есть строка таблицы, где один столбец является действием, другие столбцы содержат данные. Один из столбцов содержит код продукта (UPC). Таким образом, мы используем для отображения кода продукта всякий раз, когда кто-то нажимает на кнопку действия:

var product_code = jQuery(obj).parents('tr').children('.upc').text(); 
alert('product code'+product_code); 

Это работает, потому что наши ячейки таблицы имеют классы, такие как 1919191911919 для каждой строки.

Однако вы можете использовать другие селекторы из jQuery. Например, .children ('# myid'), если у вас есть атрибуты id, установленные в ячейке 19191919199191, а также любое количество других селекторов, таких как .children (td: first), чтобы получить первую ячейку в той же строке.