Wert von mehreren <span> Tags in HTML/JavaScript erhalten?

Question

Ich hoffe, jemand kann mir dabei helfen ... Ich folgte dem Tutorial hier: http://jsbin.com/hehurot/5/edit?html,css,js,console,output um ein Feld auf einem HTML-Formular zu erstellen, das Tags enthält. Wenn ich nun auf das Formular klicke, möchte ich die Daten in diesem Feld mit Tags erfassen und etwas damit machen (in der Datenbank speichern).

Wie würde ich gehen, um die Daten aus dem Feld zu greifen, da jedes Tag ein?

Hier ist mein aktueller Code für das Tag-Feld ist:

<div class="form-group"> 
    <label class="col-sm-3 control-label">Equipment</label> 
    <div id="tags" class="col-sm-9"> 
     <span>Hardhat</span> 
     <span>Steel Toe Boots</span> 
     <input id="equipment" type="text" name="equipment" value="" placeholder="Add equipment" > 
    </div> 
</div> 

Die JS die Tag Feldarbeit zu machen (die CSS ist auf dem oberen Link verfügbar)

<script type="text/javascript"> 
     $(function(){ 
     $("#tags input").on({ 
      focusout : function() { 
      var txt= this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); 
      if(txt) $("<span/>",{text:txt.toLowerCase(), insertBefore:this}); 
      this.value=""; 
      }, 
      keyup : function(ev) { 
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
      } 
     }); 
     $('#tags').on('click', 'span', function() { 
      /*if(confirm("Remove "+ $(this).text() +"?")) */$(this).remove(); 
     }); 
     }); 
</script> 

Jetzt in meinem JS Datei, wie kann ich die Werte als separate 's erhalten?

ich folgendes versucht, aber das funktioniert nicht, gibt leere Zeichenfolge:

'equipment': $('#tags').val() 

Vielen Dank im Voraus für die Hilfe!

Answer 1

Versuchen Sie folgendes:

var tags = $('#tags span').map(function() { 
    return $(this).text(); 
}); 

Follow-up:

ich es ein wenig verändert von der auf eine durch Kommata getrennte Liste aller Werte zu speichern.

var tags = $('#tags span').map(function() { 
    return $(this).text(); 
}); 

tags = Array.prototype.join.call(tags, ","); 
console.log(tags); 

Followup Frage, in Javascript Wie kann ich einen Tag programmatisch hinzufügen? Ich möchte die kommagetrennte Liste durchlaufen und jeden Wert zurück zu den Tags hinzufügen.

$('#tags').append(tags.split(",").map(function (tag) { 
    return "<span>" + tag + "</span>"; 
})); 

Answer 2

Mit jQuery .each()http://api.jquery.com/each/:

a = []; $('#tags > span').each(function(){a.push(this.innerHTML)}); 

// a => ["php", "c++", "jquery"] 

---

wie kann ich einen <span> Tag programmatisch hinzufügen? Ich möchte die kommagetrennte Liste durchlaufen und jeden Wert zurück zu <span> Tags hinzufügen.

Mit jQuery.each()http://api.jquery.com/jQuery.each/:

$.each(["php", "c++", "jquery"], function(i,v){ 
    $('#tags').prepend($(document.createElement('span')).text(v)) 
});