从多个div获取文本并放在其他相应的div中

Question

我有一个项目，我需要从多个容器中复制文本并添加其他容器。

具体来说，我在HTML页面上的一个地方有多个问答文本，我需要复制文本并将其放在页面上不同的相应位置。

我已经设置了一个codepen来更好地解释我需要的东西（使用4个问题演示但在项目中我有20个问题）： https ： //codepen.io/voodoo6/pen/xMRKpr

我需要所有'源'文本来替换相应位置的'目标'文本，例如。 .target > q1和.target > a1需要替换为.source > q1和.source > a1的HTML文本

当我尝试获取each问题的index并将其与相应的div 匹配时，我的JS / Jquery技能失败了 - 例如。 确保只有问题2的源文本被置于问题2的目标中。

有谁能够帮助我？ 非常感谢！

Answer 1

此示例可能有所帮助：

 $(function() { $(".source-item").each(function(i, el) { var q = $("div[class*='q']", el).text(); var a = $("div[class*='a']", el).text(); $(".target-item div.q" + (i + 1)).html(q); $(".target-item div.a" + (i + 1)).html(a); }); }); 

 .target-item { margin-bottom: 20px; color: red; } .source-item { margin-bottom: 20px; color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="target-item"> <div class="target q1">Question 1 Text Target</div> <div class="target a1">Answer 1 Text Target</div> </div> <div class="target-item"> <div class="target q2">Question 2 Text Target</div> <div class="target a2">Answer 2 Text Target</div> </div> <div class="target-item"> <div class="target q3">Question 3 Text Target</div> <div class="target a3">Answer 3 Text Target</div> </div> <div class="source-item"> <div class="source q1">Question 1 Source Text</div> <div class="source a1">Answer 1 Source Text</div> </div> <div class="source-item"> <div class="source q2">Question 2 Source Text</div> <div class="source a2">Answer 2 Source Text</div> </div> <div class="source-item"> <div class="source q3">Question 3 Source Text</div> <div class="source a3">Answer 3 Source Text</div> </div> 

希望有所帮助。

Answer 2

尝试选择具有以'a'开头的类的元素，将变量（let data =''）初始设置为空'并且调用.each（）将所有text（）追加到.each的完成时（ ）。 最后将该数据设置为目标容器的text（）。

  let data=''
  abc = ()=> {
      $().each(()=>{
      data = $(this).text()
  })
  $().text(data)
  }

您可以通过添加“答案”作为课程来轻松选择答案，其中您的班级“a”作为前缀和答案编号保留在那里。 进一步的div内容尝试使用html（）或innerHtml（）？！ 代替文字（）