<span>在HTML / JavaScript中</span>获得多个<span>标签的</span>价值<span>？</span>

Question

I'm hoping someone can help me out with this...I followed the tutorial here: http://jsbin.com/hehurot/5/edit?html,css,js,console,output to create a field on an HTML form which contains tags. Now when I click submit on my form I want to grab the data in that field with tags and do something with it (save to database).

How would I go about grabbing the data from the field since each tag is a ?

Here is my current code for the tag field:

<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>

The JS to make the tag field work (the CSS is available on the link above)

<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>

Now in my JS file, how can I get the values saved as separate 's?

I tried the following but this does not work, returns empty string:

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

Thanks in advance for the help!

Answer 1

Try this:

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

Follow-up:

I modified it a bit to save all the values from the to a comma separated list.

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

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

Followup question, in Javascript how can I add a tag programatically? I want to loop through the comma separated list and add each value back to tags.

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

Answer 2

Using jQuery's .each() http://api.jquery.com/each/ :

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

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

---

how can I add a <span> tag programmatically? I want to loop through the comma separated list and add each value back to <span> tags.

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

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