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

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

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

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>[email protected]</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>[email protected]</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);
}

Ответ 1

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

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

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

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

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

function doSomething ( imgEl ) {
}

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

Ответ 2

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

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

});

Ответ 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 вместо этого, как показано выше.

Ответ 4

Может быть, это поможет кому-то. Это всего лишь часть всей статьи здесь.

Разница

Если вы хотите использовать это для доступа к элементу 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.

Ответ 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), чтобы получить первую ячейку в той же строке.