Как применить встроенное редактирование (в jQuery) для сопоставленного элемента?

Question

Возможно, это более общий вопрос jQuery (или даже Javascript): в основном я использую плагин jquery-in-place-editor для создаваемого портала членства, где на этой странице перечислены все участники. из таблицы базы данных. Таким образом, вы можете себе представить, что на этой странице есть несколько профилей с типичными полями, такими как имя, профиль, изображение профиля и адрес электронной почты, и я бы хотел, чтобы администратор мог редактировать каждый профиль (все поля внутри для участника) на той же странице. Проблема заключается в том, что, хотя я могу выбрать, какой конкретный элемент применять для встроенного редактирования, я не могу придумать динамический способ выбора всех элементов. Я разместил код JS, и если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

$(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'>
                    a.b@c.com
                </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'>
                    abc@def.com
                </p>
                <p class='profile' id='2'>
                    This is abc
                </p>
            </div>
    </li>   
</ul>

Так что мой update.php работает как его имя, обновляет таблицу для этого идентификатора.

Как видите, проблема здесь в том, что $(".name") выбирает все clas = "name" (в данном случае более одного элемента), я знаю, что могу пройтись по всем этим элементам и выполнить вызов метода, но это кажется слишком уродливым для меня. Любое предложение, как я могу этого добиться? Спасибо!

Answer 1

Если код, который у вас есть, не работает (было бы неплохо, если бы он работал; автору плагина следует переписать его, поэтому я считаю):

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

См. http://docs.jquery.com/Core/each#callback