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

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

演示：小提琴

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