jquery - ersetzen Spannen mit Eingabefeldern

Question

so habe ich die Anzahl der SPANs Elemente, und jedes haben Eingabefeld. Wenn ich auf die Schaltfläche SPEICHERN klicke, würde ich sagen, dass die Eingabefelddaten die SPAN-Daten ersetzen werden (entsprechend der rechten Div-Box - 1 oder 2).

<a href="#" id="save-edit-button" data-attr="box2">SAVE</a> 

<div id="box1-edit-area" > 
    <li><span id="website" class="edit-text" style="display: inline; ">www.site.com</span> 
     <input type="text" value="www.site.com" class="edit-input" id="website_input" > 
    </li> 

    <li><span id="first" class="edit-text" style="display: inline; ">first name</span> 
     <input type="text" value="Roi" class="edit-input" id="first_input" > 
    </li> 
</div> 

<div id="box2-edit-area" > 
    <li><span id="phone" class="edit-text" style="display: inline; ">97542668</span> 
     <input type="text" value="97542668m" class="edit-input" id="phone_input" > 
    </li> 

    <li><span id="city" class="edit-text" style="display: inline; ">Paris</span> 
     <input type="text" value="Paris" class="edit-input" id="city_input" > 
    </li> 
</div> 

SCRIPT

$(document).ready(function() 
{ 
    $(document).on('click', "#save-edit-button", function() 
    { 
     DATA INSIDE THE INPUT FIELD SHOULD REPLACE THE RELEVANT SPAN 
    }); 
}); 

Answer 1

$("#save-edit-button").click(function() { 
    $("#box1-edit-area li input[type=text]").each(function() { 
    $(this).prev().text($(this).val()); 
    }); 
}); 

Verwenden Sie den obigen Code, es arbeiten zu sehen.

Was passiert hier?

Verwendung von Klickereignis auf $("#save-edit-button").

Schleifen alle input[type=text] within li, überprüft die vorherige Tag und fügt den Wert der aktuellen input[text] darunter.