Выберите первый одноуровневый элемент
Я пытаюсь выбрать внутреннее значение первого одноуровневого элемента - использования 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>
и для JavaScript jQuery:
function startStopNode(el) {
var temp = $(el).parent().siblings(':first').html();
alert("you clicked: " + temp);
}
4 ответа
$( 'td:first-child', $( this ).parents ( 'tr' ) ).html ();
Это выберет первый элемент TD (: фильтр первого ребенка) в родительском три изображения. Родители () возвращает всех родителей элемента, и мы отфильтровали родителей, чтобы возвращаться только элементы TR.
Также попробуйте написать свое изображение так:
<img src="bobsmith.png" onclick="doSomething(this)" />
И ваша функция такая:
function doSomething ( imgEl ) {
}
и использование IMGEL вместо это
$('tr td:last-child img').click(function(){
alert($('td:first-child',$(this).closest('tr')).text());
});
Может быть, это поможет кому-то. Это всего лишь часть всего статьи здесь .
Разница
Если вы хотите использовать это для доступа к 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()
}
, это просто ссылка на функцию дошутного (). Это ключевое слово отсутствует в методе onclick, поэтому он не относится к элементу HTML.
Я бы настроил событие, используя 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);
}
Вы правы. «Это» не передается, вам нужно редактировать HTML, чтобы сделать эту работу. Или просто используйте jQuery вместо в качестве шоу выше.