函数如何找到最初调用该函数的锚点的父元素？

Question

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

我有一个正在调用函数的锚标记：

<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 来测试我的想法，但它不断返回“未定义”。我还尝试在锚标记本身中运行 console.log，但它也是“未定义”。

我测试了 .parents() ，它在锚标记中完美运行，但在函数 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.
}  

Answer 2

不要使用 onclick 属性来使用 jQuery 事件绑定。由于您没有提供有关标记的任何信息，因此您需要自己填写选择器

//this binds the same function to all a tags specified by the selector
$("form somemoreselectorgotgettheright a").bind("click", function() {
    console.log($(this).parent("form").attr("id"));
    ....
});

Answer 3

this 上下文是不同的。将 onclick 更改为这样：

addPerson.call(this);

这将使函数中的 this 与锚标记中的 this 匹配。

或者更好的是，根本不使用 onclick 属性，而是使用 jQuery 事件处理程序附件，如下所示：

$(document).ready(function() {
    $('#addPerson').click(function(ev) {
        ev.preventDefault();
        // Do something with $(this), which is the anchor tag
    });
});

并且您的锚标记上不会有任何单击处理程序：

<a href="#" id="addPerson">Add a Guest</a>

Answer 4

将parents() 与选择器一起使用（这将向上搜索所有父级，直到找到匹配项）。例如

$(this).parents('form').[...]

Answer 5

将 id 作为参数传入。例如

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

then...

function addPerson(parent_id) {
// do something with parent_id