在HTML/JavaScript中获取多个<span>标记的值？

Question

我希望有人能帮我解决这个问题……我按照这里的教程：http://jsbin.com/hehurot/5/edit?html,css,js,console,output在包含标签的HTML上创建一个字段。现在，当我在表单上单击submit时，我希望使用标记获取该字段中的数据，并对其执行一些操作(保存到数据库)。

如何从字段中抓取数据，因为每个标记都是？

下面是标记字段的当前代码：

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

使标记字段工作的JS ( CSS在上面的链接上可用)

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

现在，在我的JS文件中，如何将值保存为单独的值？

我尝试了以下操作，但这不起作用，返回空字符串：

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

提前感谢您的帮助！

Answer 1

试试这个：

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

跟进：

我对它做了一些修改，以便将所有的值从逗号分隔的列表中保存下来。

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

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

后续问题，在Javascript中，我如何通过编程添加一个标记？我想循环遍历逗号分隔的列表，并将每个值添加回标记。

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

Answer 2

使用jQuery的.each() http://api.jquery.com/each/

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

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

如何以编程方式添加<span>标记？我想循环遍历逗号分隔的列表，并将每个值添加回<span>标记。

使用jQuery.each() http://api.jquery.com/jQuery.each/

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