jquery - 动态 jquery 对话框

Question

我正在尝试使用 jquery 对话框来编辑网页的内容。我想要一个编辑按钮，它从下面的列表中获取内容（只有名称和简历，而不是图像）并将它们放入 jquery 对话框中。该对话框将分别有一个可编辑的文本字段和一个可编辑的名称和生物文本区域，用于在列表中输入。我认为这样做的方法是

$("#list").each(function() {
    $("#dialog-list").append($(this).text());
}

但是当我需要为每个人添加姓名和简历时，我无法弄清楚如何执行此操作。复杂的是，在原始列表的每个 li 中，我都有一个内部 ul。我需要这个，因为我想把图片放在名字和简历旁边。所以，我的两个问题是：有没有办法做我在这里描述的事情，如果我有更好的方法将图像放在原始列表中的文本旁边，会有更简单的方法吗？谢谢您的帮助。

<ul id="list">
    <li class="person">
        <ul class="contents">
        <li>
            <img src="images/person.png">
        </li>
        <li>
            <h2>John Smith</h2>
            <hr/>
            <p>Bio</p>
        </li>
        </ul>   
    </li>
    <li class="person">
        <ul class="contents">
        <li>
            <img src="images/person.png">
        </li>
        <li>
            <h2>John Smith</h2>
            <hr/>
            <p>Bio2</p>
        </li>
        </ul>   
    </li>
</ul>

Answer 1

You may try this (DEMO)

$(function(){
    $('.edit').on('click', function(){
        var el = $(this),
            div = $('<div/>', {
                'id':'dlg',
                'class':'dlgEditor'
            }).append($('<label/>', {
                'text':'Name',
                'style':'display:block'
            })).append($('<input/>', {
                'type':'text',
                'style':'width:250px',
                'id':'name',
                'value':el.closest('li').find('h2').text()
            })).append($('<label/>', {
                'text':'Bio',
                'style':'display:block'
            }))
            .append($('<textarea/>', {
                'id':'bio',
                'style':'width:250px',
                'html':el.closest('li').find('p').text()
            })).appendTo('body')
            .dialog({
                title:'Edit',
                buttons: [
                   {
                       text: "Save",
                       click: function(){
                           var li = $('li.editing'),
                               name = $(this).find('#name').val(),
                               bio = $(this).find('#bio').val();
                           li.find('h2').text(name);
                           li.find('p').text(bio);
                       }
                   },
                   {
                       text: "Close",
                       click: function(){
                           $(this).dialog('close');
                           $('li.editing').removeClass('editing');
                       }
                   }
               ]
        });
        el.closest('li').addClass('editing');
    });
});