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;
});