获取span的每个类的值，并将字符串输入

get value of each class of span and put string to input

本文关键字：字符串 输入 span 获取      更新时间：2023-09-26

我有一个名为"标记标签"的跨度中的值列表。我希望添加每个跨度的值，并将它们插入到用逗号分隔的输入字段中。

我已经建立了一个JSFiddle来展示它。http://jsfiddle.net/stefanselby/7wrg611k/

我的HTML:

<label for="TagsHolder">Keywords</label>
<ul>
   <li><span class="tag-label">test 1</span></li>
   <li><span class="tag-label">test 2</span></li>
   <li><span class="tag-label">test 3</span></li>
</ul>
<input type="text" id="TagsHolder" name="TagsHolder" value="" />
<button id="btn">Update</button>
<p></p>
<p>This is what I require</p>
<input type="text" id="TagsHolder2" name="TagsHolder2" value="test 1,test 2,test 3" />

我的Javascript（我被卡住的地方）：

$(document).ready(function(){
  $("#btn").click(function(){
       $.each($('.tag-label'), function (index, value) {
           $("#TagsHolder").val(index);
       });
    });
});

您可以使用.map获取数组，然后加入,

var values = $(".tag-label").map(function() {
    return $(this).text();
}).get().join(",");
$("#TagsHolder").val(values);

Fiddle：http://jsfiddle.net/7wrg611k/3/

您的方法存在几个问题。

index是当前元素的数组索引，而不是它的文本。

您的循环将替换每次通过的值，因此只有最后一个值会被看到，因为之前的每个值集都将被替换

你最好的选择是创建一个数组并加入该数组：

 $("#btn4").click(function () {
    var values = $('.tag-label').map(function () {
        return $(this).text();
    }).get().join();
    $("#TagsHolder").val(values);
});

DEMO

相关文章：