How can a function find a parent element of the anchor which originally called the function?

问题

Ok, the question alone is making my head spin.

I have an anchor tag that is calling a function:

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

Just for reference, this is the function that's being called:

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

I'd like to allow this function to work on multiple forms on a single page. So my thinking was to travel back in the tree to the parent form element, get its id and use that (somehow) to allow the function to work on multiple forms in the page.

You can see I tried using a quick console.log to test my idea, but it kept coming back "Undefined". I also tried running the console.log in the anchor tag itself, but it also was "Undefined".

I tested .parents() and it works perfectly in the anchor tag, but not in the function iteslf.

Any suggestions?

回答1:

You should pass $(this) into add parents and then you'll have the proper scope to work with in your function. So:

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

and then in the function use:

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

回答2:

Don't use the onclick attribute use jQuery event binding. As you didn't provide any info about the markup you need to fill in the selector yourself

//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"));
    ....
});

回答3:

The this context is different. Change the onclick to this:

addPerson.call(this);

That will make the this in the function match up with the this in the anchor tag.

Or better yet, don't use an onclick attribute at all, but use a jQuery event handler attachment, like this:

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

And your anchor tag would not have any click handler on it:

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

回答4:

Use parents() with a selector (this will search upward through all parents until the match i found). e.g.

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

回答5:

Pass in the id as a parameter. Eg

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

then...

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

来源：https://stackoverflow.com/questions/4250669/how-can-a-function-find-a-parent-element-of-the-anchor-which-originally-called-t

标签

javascript

jquery

function

parent

tree-traversal