Динамический диалог jquery

Question

Я пытаюсь использовать диалог jquery для редактирования содержимого веб-страницы. Я хочу иметь кнопку редактирования, которая выводит содержимое из приведенного ниже списка (только имя и биос, а не изображения) и помещает их в диалог jquery. Этот диалог будет иметь редактируемое текстовое поле и редактируемую текстовую область для имени и биографии, соответственно, для записи в списке. Я lmpw, что способ сделать это было бы что-то вроде

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

, но я не могу понять, как сделать это, когда мне нужно добавить как имя и био для каждого человека. Это осложняется тем, что в каждом ли исходного списка у меня есть внутренняя 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

Вы можете попробовать это (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'); 
    }); 
});