How to apply inline edit (in jQuery) for matched element?

Question

This perhaps is a more general jQuery (or even Javascript) question: Basically I am using jquery-in-place-editor plugin for a membership portal that I am building, where this page lists all members from a database table. So you can imagine this page has a number of profiles with typical fields like name, profile, profile image, and email address, what I would love to achieve is that admin will be able to edit each profile (all fields within for a member) within the same page. The problem is: while I can choose which specific element to apply inline edit, I can't come up with a dynamic way to select all elements. I have posted the js code, and if you have need more information, please let me know.

$(document).ready(function () {
    $(".name").editInPlace({
        url: "./update.php",
        field_type: "text",
        saving_image: "./images/ajax-loader.gif",
        show_buttons: true
    });
});

html:

<ul class="column">
    <li>
        <div class='block'>
            <a href='member.php?memberid=3'>
                update
            </a>
            |
            <a href='delete.php?memberid=1' class='delete'>
                delete
            </a>
            <div class='memberImage' id='1'>
                <img src='http://www.somewhere.com/img.png'
                />
                <h2>
                    <p class='name' id='1'>
                        a.b
                </h2>
                <p class='email' id='1'>
                    [email protected]
                </p>
                <p class='profile' id='1'>
                    this is whatever
                </p>
            </div>
    </li>
    <li>
        <div class='block'>
            <a href='member.php?memberid=2'>
                update
            </a>
            |
            <a href='delete.php?memberid=2' class='delete'>
                delete
            </a>
            <div class='memberImage' id='2'>
                <img src='http://www.somewhere.com/img2.png'
                />
                <h2>
                    <p class='name' id='2'>
                        abc
                </h2>
                <p class='email' id='2'>
                    [email protected]
                </p>
                <p class='profile' id='2'>
                    This is abc
                </p>
            </div>
    </li>   
</ul>

So my update.php works as its name, updates the table per for that id.

As you can see, the problem here is $(".name") selects all clas="name" (which in this case has more than one element), I know I can loop through all these elements and make the method call,but that seems too ugly for me. Any suggestion how I can achieve this? Thanks!

Answer 1

If the code you have doesn’t work (it’d be nice if it did; the plugin’s author should re-write it so it does I reckon), this should:

$(document).ready(function () {
    $(".name").each(function(){
        $(this).editInPlace({
            url: "./update.php",
            field_type: "text",
            saving_image: "./images/ajax-loader.gif",
            show_buttons: true
        });
    });
});

See http://docs.jquery.com/Core/each#callback