javascript - 函数如何找到最初调用该函数的 anchor 的父元素？

Question

好吧，光是这个问题就让我头晕目眩。

我有一个正在调用函数的 anchor 标记:

<a href="#" id="addPerson" onClick="addPerson(); return false;">Add a Guest</a>

仅供引用，这是正在调用的函数:

function addPerson() {
//current keeps track of how many rows we have.
current++;
console.log($(this).parent('form').attr('id'));
var strToAdd = '<div class="row">\
          <div class="column grid_2">\
            <label for="two-guests-name'+current+'">Guest '+current+':</label>\
          </div>\
          <div class="column grid_5">\
            <input name="two-guests-name'+current+'" type="text" id="two-guests-name'+current+'" value="Name" onfocus="RemoveFormatString(this, \'Name\')" /> \
            <input name="two-guests-age'+current+'" type="text" class="guestage digits" id="two-guests-age'+current+'" value="Age" size="4" maxlength="3" onfocus="RemoveFormatString(this, \'Age\')" />\
          </div>\
        </div>'

$('#numberguests').append(strToAdd)
};

我希望允许此函数在单个页面上的多个表单上运行。所以我的想法是在树中返回到父表单元素，获取其 id 并使用它(以某种方式)允许该函数在页面中的多个表单上工作。

您可以看到我尝试使用快速 console.log 来测试我的想法，但它不断返回“未定义”。我还尝试在 anchor 标记本身中运行 console.log，但它也是“未定义”。

我测试了 .parents() ，它在 anchor 标记中完美运行，但在函数 iteslf 中不起作用。

有什么建议吗？

Answer 1

您应该将 $(this) 传递给添加父项，然后您将在函数中拥有适当的范围。所以:

<a href="#" id="addPerson" onClick="addPerson($(this)); return false;">Add a Guest</a>

然后在函数中使用:

function addPerson(anchorElement) {
    var form = anchorElement.parents("form");
    //etc.
}