JQuery.closest не определено
Это часть более широкого применения.
То, что я пытаюсь сделать, это получить текст в 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;
});
Почему я получаю undefined при чтении .closest .span1?
.closest() проходит через родителей (предков) элемента и останавливается на первом, который соответствует вашему селектору.
Ваша <form> не является дочерним элементом <span>, поэтому $(this).closest("span") возвращает 0 элементов.
Описание. Для каждого элемента в наборе получите первый элемент, который соответствует селектору, путем тестирования самого элемента и прохождения его предков в дереве DOM.
http://api.jquery.com/closest/
Пролет - родственный (предка), не являющийся предком формы.
span1 = $(this).parents().filter(function () {
return $(this).siblings('.span1').length
}).first().siblings('.span1').html();
для того, чтобы найти самый closest span вы должны сделать это, span родителя form
<span>
<form>
</form>
</span>
Вы можете достичь того, что хотите, используя тот же HTML-код, который у вас есть.
$(document).on("submit","#theform",function(){
$('.span1').html($('#input1').val());
return false;
});
