Question

I am writing a Greasemonkey userscript, with jQuery. The segment of code affects forum thread pages, and intends to append a button to the footer of every post.

Assume the button is already a jQuery element $button, this is the code I have:

$('table.posts').each(function() {
    //get the name of the poster
    profileName = $(this).find('.user').text();
    //change the link relative to each poster
    $button.attr('href', '/search?user=' + profileName);
    //This is the problematic line:
    $(this).find('div.postFooter').append($button); 
});

I have tested the value of profileName using an alert, and it successfully iterates through and alerts the profile names, but it only appends the button to the last post’s footer (with the correct link).

I’ve tried using a variety of different selectors and ways to traverse the DOM to the required element, but all methods have resulted in the same thing. I’m out of ideas.

Answer 1

Use clone:

$(this).find('div.postFooter').append($button.clone(true)); 

Everytime you are changing and appending the same $button element.