[ANSWERED] javascript – replace div text with another div in div jquery onload

Question 1

Problem is when you use text() it will return the first item in the collection. It has no clue you want to grab it for other elements. So you need to code it to deal with the relationships.

You will have to loop over each group and select each one in the group.

$(".main").each( function () {
  var elem = $(this)
  var text = elem.find(".second").text()
  elem.find(".first").text(text)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="first">A text</div>
<div class="second">B text</div>
</div>

<div class="main">
<div class="first">C text</div>
<div class="second">D text</div>
</div>

Other option is to select all the elements and loop over

var firsts = $(".first")
var seconds = $(".second")

firsts.each( function (index) {
  $(this).text(seconds.eq(index).text())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="first">A text</div>
<div class="second">B text</div>
</div>

<div class="main">
<div class="first">C text</div>
<div class="second">D text</div>
</div>

and without each

var firsts = $(".first")
var seconds = $(".second")

firsts.text( function (index) {
  return seconds.eq(index).text()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="first">A text</div>
<div class="second">B text</div>
</div>

<div class="main">
<div class="first">C text</div>
<div class="second">D text</div>
</div>

Question 2

The problem is because your code selects all .first elements.

To fix the problem you can select the second div in each .main block and provide a function to text() which returns the text of the previous sibling. Try this:

$('.main > div:nth-child(2)').text(function() {
  return $(this).prev().text();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="first">A text</div>
  <div class="second">B text</div>
</div>

<div class="main">
  <div class="first">C text</div>
  <div class="second">D text</div>
</div>

Note that the .first and .second classes are no longer necessary with this approach

Question 3

Here you can try loop over the .main, get the .first and .second element and swap the values.

jQuery(function($) {

     $.each( $('.main'), function() {
  	var $first  = $(this).find('.first');
  	var firstHTML = $($first).html();
        var $second = $(this).find('.second');
   
        $($second).html(firstHTML);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="first">A text</div>
<div class="second">B text</div>
</div>

<div class="main">
<div class="first">C text</div>
<div class="second">D text</div>
</div>

Question 4

<div class="main">
<div class="first">A text</div>
<div class="second">B text</div>
</div>

<div class="main">
<div class="first">C text</div>
<div class="second">D text</div>
</div>

I want to change B text with A text and D text with C text with jquery. I added this script:

$('.second').html($('.first').html());

but it change A text in both main div

Bollate

[ANSWERED] javascript – replace div text with another div in div jquery onload

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

Comments

Comment posted by epascarello

Comment posted by chriskirknielsen

Comment posted by nasir

Comment posted by Rory McCrossan

Comment posted by nasir

Comment posted by Rory McCrossan

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate