JQuery.closest не определено

70
8

Это часть более широкого применения.
То, что я пытаюсь сделать, это получить текст в span1 при отправке формы с помощью .closest в JQuery.

Результат span1 = $(this).closest("span").html() не определен.

HTML

<span class="span1">
texthere
</span>
<div>
<div class="whatever">
<form id="theform" action="#" method="POST">
<input type="text" name="input1" />
</form>
</div>
</div>

Jquery

$(document).on("submit","#theform",function(){
span1 = $(this).closest("span").html();
input1 = $(this).find("input").val();
alert(span1+" - "+input1);
return false;
});

JSFFIDLE

Почему я получаю undefined при чтении .closest .span1?

спросил(а) 2013-07-24T18:12:00+04:00 7 лет, 2 месяца назад
1
Решение
57

.closest() проходит через родителей (предков) элемента и останавливается на первом, который соответствует вашему селектору.

Ваша <form> не является дочерним элементом <span>, поэтому $(this).closest("span") возвращает 0 элементов.

ответил(а) 2013-07-24T18:14:00+04:00 7 лет, 2 месяца назад
57

Описание. Для каждого элемента в наборе получите первый элемент, который соответствует селектору, путем тестирования самого элемента и прохождения его предков в дереве DOM.

http://api.jquery.com/closest/

Пролет - родственный (предка), не являющийся предком формы.

ответил(а) 2013-07-24T18:16:00+04:00 7 лет, 2 месяца назад
41

span1 = $(this).parents().filter(function () {
return $(this).siblings('.span1').length
}).first().siblings('.span1').html();

ответил(а) 2013-07-24T18:28:00+04:00 7 лет, 2 месяца назад
41

для того, чтобы найти самый closest span вы должны сделать это, span родителя form

<span>
<form>
</form>
</span>

Вы можете достичь того, что хотите, используя тот же HTML-код, который у вас есть.

$(document).on("submit","#theform",function(){
$('.span1').html($('#input1').val());
return false;
});

FIDDLE

ответил(а) 2013-07-24T18:20:00+04:00 7 лет, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема