jquery - Jquery .closest 未定义

Question

这是一个更大的应用程序的一部分。
我想要做的是在span1提交表单时使用.closestJquery 获取文本。

的结果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

为什么我在阅读时变得不确定.closest .span1？

Answer 1

.closest()向上遍历元素的父母（祖先）并在与您的选择器匹配的第一个停止。

您<form>不是标签的子<span>标签，因此$(this).closest("span")返回 0 个元素。

Answer 2

描述：对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

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

跨度是（祖先的）兄弟而不是表单的祖先。

Answer 3

为了找到closest span你必须使它span的父母form

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

您可以使用与此相同的 html 来实现您想要的

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

小提琴

Answer 4

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