Question

我在页面上有多个表单，如下所示：

<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中（如果我将它们放在彼此旁边，它确实有效）。

我该如何做到这一点？

Answer 1

您要查找的元素不是提交按钮的兄弟。

在您的情况下，我建议找到表单元素（您可以使用.closest()找到单击按钮所在的表单元素），然后使用.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

Answer 2

由于你的.submitClass放在div和span中，它不是其他输入的兄弟......你可以尝试这样的事情：（Working jsFiddle）

var id = jQuery(this).closest('form').find("input[name='id']").val();
var name = jQuery(this).closest('form').find("input[name='name']").val();

首先查找父表单，然后在其中查找输入字段..更高效的版本将是：

var $form = jQuery(this).closest('form');
var id = $form.find("input[name='id']").val();
var name = $form.find("input[name='name']").val();

如何在不同的DIV或SPAN中获得兄弟姐妹？

2 个答案: