javascript - 如何获得不同DIV或SPAN中的 sibling ？

我在页面上有许多表格，例如：

<form>
    <input type="hidden" name="id" value="someID1">
    <div>
        <span>
            <input type="submit" class="submitClass">
        </span>
    </div>

    <div>
        <input type="text" name="name" class="someClass" value="name1">
    </div>
</form>

<form>
    <input type="hidden" name="id" value="someID1">
    <div>
        <span>
            <input type="submit" class="submitClass">
        </span>
    </div>

    <div>
        <input type="text" name="name" class="someClass" value="name1">
    </div>
</form>

然后我有一些JS：

jQuery(document).ready(
    function()
    {
        console.log("page loaded");

        jQuery(".submitClass").on("click", function() {
            var id = jQuery(this).siblings("input[name='id']").val();
            var name = jQuery(this).siblings("input[name='name']").val();

            console.log(id);
            console.log(name);

            return false;
        });
    }
);

JSFIDDLE：http://jsfiddle.net/sEXg3/

单击提交按钮后，我想停止提交表单，并获取提交按钮旁边的两个输入的值。

我尝试使用.siblings()函数执行此操作，但是由于输入位于不同的DIV / SPAN中，因此它不起作用（如果我将它们彼此紧邻放置，则可以正常工作）。

我该怎么做？

最佳答案

您要查找的元素不是“提交”按钮的同级对象。

在您的情况下，我建议找到form元素（您可以使用.closest()找到其中存在单击按钮的form元素），然后使用.find()在其中找到所需的输入字段。

jQuery(function ($) {
    console.log("page loaded");

    $(".submitClass").on("click", function () {
        var $this = $(this),
            $form = $this.closest('form');
        var id = $form.find("input[name='id']").val();
        var name = $form.find("input[name='name']").val();

        console.log(id);
        console.log(name);

        return false;
    });
});

演示：Fiddle