how to dynamically set text to an element in jquery

Question

i have an onclick function that that calls a changeName function anytime a click event on that element happens.

    function changeName() {
    var frag = $('<a href="#0"><span class="Name">change me</span></a>');
    $( ".list" ).prepend(frag);
    var x =[];
    $('.ch-gname').each(function(index, obj)
    {
     x.push($(this).text());
      for(i=0; i<x.length; i++) {
       $('.Name').text(x[i]);}}});
       $('#action').on('click', changeName);

HTML

      <div>
       <a href="#0" class="cb-pgcar"</a>
        <span class="ch-gname">Greenhouse</span>
        </div>
      <div>
       <a href="#0" class="cb-pgcar"</a>
        <span class="ch-gname">tree house</span>
        </div>
       <div>
       <a href="#0" class="cb-pgcar"</a>
        <span class="ch-gname">light house</span>
        </div>
         <div class="list">
         </div>
         <div class="list">
         </div>
         <div class="list">
         </div>

i want to able to change the text of the class Name to the text of class ch-gname. My function gives me only the last text text(lighthouse) for the three links.Any help please

Answer 1

函数changeName（）有$('#action').on('click', changeName);但我没有看到任何带有id＆＃39; action＆＃39;的元素。无论如何，我做了必要的改变，以使其工作。

1. 为元素添加了操作ID
2. 将$('.Name').text(x[i]);更改为$('.Name')[i].innerHTML = x[i];

请看下面的例子

＆＃13;
＆＃13;
function changeName() {
  var frag = $('<a href="#0"><span class="Name">change me</span></a>');
  $(".list").prepend(frag);
  var x = [];
  $('.ch-gname').each(function(index, obj) {
    x.push($(this).text());
  });
    for (i = 0; i < x.length; i++) {
      $('.Name')[i].innerHTML = x[i];
    }
}

$('#action').on('click', changeName);
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="#0" class="cb-pgcar" </a>
    <span id="action" class="ch-gname">Greenhouse</span>
</div>
<div>
  <a href="#0" class="cb-pgcar" </a>
    <span id="action" class="ch-gname">tree house</span>
</div>
<div>
  <a href="#0" class="cb-pgcar" </a>
    <span id="action" class="ch-gname">light house</span>
</div>
<div class="list">
</div>
<div class="list">
</div>
<div class="list">
</div>
＆＃13;
＆＃13;
＆＃13;