CODEWITHSUNDEEP
javascriptjquery
matt_50
matt_50

Reputation: 7645

Get text from multiple divs and place in other corresponding divs

I have a project where I need to copy text from multiple containers and add it other containers.

Specifically, I have multiple question and answer texts in one place on a HTML page and I need to copy the text and place it into a different corresponding place on the page.

I've setup a codepen to better explain what I need (demoed using 4 questions but in the project I have there are 20 questions): https://codepen.io/voodoo6/pen/xMRKpr

I need all the 'source' text to replace the 'target' text in the corresponding positions eg. .target > q1 and .target > a1 needs replacing with the HTML text of .source > q1 and .source > a1

My JS/Jquery skills have failed me when trying to get the index of the each question and match it to the corresponding div – eg. making sure only question 2's source text gets placed in question 2's target.

Can anybody help me? Many thanks!

Upvotes: 3

Views: 740

Answers (2)

Twisty
Twisty

Reputation: 30893

This example might help:

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

Hope that helps.

Upvotes: 1

KumailR
KumailR

Reputation: 505

Try select the element having a class starts with 'a', have a variable (let data='') initially set empty '' and than call .each() append all the text() into that and on finish of .each(). Last set that data into text() of the target container.

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

You can go easy with the selection of answer by adding 'answer' as a class where your class 'a' as prefix and answer number remains there. Further for div content try with html() or innerHtml() ?! in place of text()

Upvotes: 0

Related Questions