получить значение каждого класса span и положить строку для ввода

Question

У меня есть список значений в пролетах, называемых тегом-меткой. Я хочу добавить значение каждого из этих интервалов и вставить их в поле ввода, разделенное запятыми.

Я установил 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); 
     }); 
    }); 
}); 

Answer 1

Вы можете использовать .map, чтобы получить массив, а затем присоединиться на ,

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

$("#TagsHolder").val(values); 

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

Answer 2

Несколько проблем с вашим подходом.

index - это индекс массива текущего элемента, а не его текст.

Ваш цикл будет заменить значение каждого прохода, поэтому только последнее значение будет видно, так как каждый предыдущий набор значений будет заменен

Лучше всего создать массив и присоединиться к этому массиву:

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

DEMO