Question

Please check out my code here

http://jsfiddle.net/bYDPr/20/

So I have some HTML textarea elements

<textarea id="area11ba" class="showEditor">1</textarea><br/>
<textarea id="area22ab" class="showEditor">2</textarea><br/>
<textarea id="area33cd" class="showEditor">3</textarea><br/>
<textarea id="area4fg">4</textarea><br/>
<textarea id="area55ed" class="showEditor">5</textarea><br/>

And I wanna add an “Editor” button under each textarea that has “showEditor” class, then when people click on the Editor button, it should alert the content of that textarea.

Here is my attempt

$("textarea[class*='showEditor']").each(function(index) {

    textareaid = $(this).attr('id');
    buttonId = "editorButton" + index;
    editorButton = '<div class="editorButton"><a id="' + buttonId + '">Editor</a></div>';
    $(editorButton).insertAfter(this);

    that = this;

    $('#' + buttonId).click(function() {
        content = $('#'+ textareaid ).val();
        alert(content);
    });


});

But unfortunately the alerted value is always 5, which is the last defined element.

How can this be done properly?

Thanks

Answer 1

Not sure if you mean to skip “showEditor” class for area 4, but if not, here’s the result: http://jsfiddle.net/bYDPr/8/

Basically, change

content = $(that).val();

to

content = $('#area' + (index+1)).val();

EDIT: Change “that = this;” to “var that = this;”

$("textarea[class*='showEditor']").each(function(index) {

        buttonId = "editorButton" + index;
        editorButton = '<div class="editorButton"><a id="' + buttonId + '">Editor</a></div>';
        $(editorButton).insertAfter(this);

        var that = this;

        $('#' + buttonId).click(function() {
            content = $(that).val();
            alert(content);
        });     
});