jquery - 如何抓取随机混合的输入和段落的内容

Question

假设我有一些像这样的 HTML:

当心!它位于 Jade

   p Dear Lorem ipsum,                                                  
   p Lorem Ipsum is simply dummy text of the printing and typesetting 
      input(type="text", placeholder="phone/mail")                          
      | on [HERE]                                                           
      input(type="text", placeholder="date")                                
      | and identified the debt as [HERE]                                   
      input(type="text", placeholder="lorem")      
      | . bled it to make a type specimen book. It has survived not only five centuries, but also the leap into.                                                                       
   p  dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknow
      input(type="text", placeholder="mediums of communication", value="Messaging Service")
      | den-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites 
   p Thank you for your cooperation.                                       

   p Sincerely,
   button#send(value="submit")

我如何在 $("#send").click 上收集所有段落，以便将输入很好地滑入其中。

例如，我想知道如何编写一个将以上所有内容作为输入和输出的函数:

[
   "Dear Lorem ipsum,",
   "Lorem Ipsum is simply dummy text of the printing and typesetting 555-1234 on [HERE] some date and identified the debt as [HERE] this is inputted text. bled it to make a type specimen book. It has survived not only five centuries, but also the leap into.",
   "dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknow this is an inputted medium of communication den-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites",
   "Thank you for your cooperation.",
   "Sincerely"
]

Answer 1

我会这样做:http://jsfiddle.net/b64aq/1/

假设您使用以下 HTML(我认为这是 Jade 脚本的输出):

<div class="container">
    <p>Dear Lorem ipsum,</p>                                               
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting <input type="text" name="contact" placeholder="phone/mail" /> on [HERE] <input type="text" name="date" placeholder="date" /> and identified the debt as [HERE] <input type="text" name="lorem" placeholder="lorem" /> . bled it to make a type specimen book. It has survived not only five centuries, but also the leap into.</p>                                                     
    <p>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknow <input  type="text" name="mediums" placeholder="mediums of communication"  value="Messaging Service"> den-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites </p>
    <p>Thank you for your cooperation.</p>     
    <p>Sincerely</p>
    <button id="send" type="send" value="submit">
</div>
<div class="result"></div>

这应该可以做到:

$('#send').click( function() {
    var array = [];
    var $paragraphs = $('.container').clone().find('p');
    $paragraphs.each( function( ) {
        $(this).children().each(function( ) {
            $(this).replaceWith( $(this).val() );
        } );
        array.push( $(this).text() );
    } );

    $('.result').append( array.join('<br>') );
} );

也就是说，首先将每个输入元素替换为其值，然后提取每个段落的文本。