Solution 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>

Solution 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

Solution 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>

Problem :

<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

Comments

Comment posted by epascarello

So you will have to loop over the main elements and select them

Comment posted by chriskirknielsen

Your code is looking for any first result for

Comment posted by nasir

Thank you Rory,its working, can you please do it without selector.

Comment posted by Rory McCrossan

So in this case which text should be overwritten? I’d suggest updating the question with a more accurate example of the HTML

Comment posted by nasir

can you do it with only class name

Comment posted by Rory McCrossan

Probably, but you haven’t shown what the class names are for the other divs. @epascarello’s answer shows solutions which may work for that case. You should note that the better approach, IMO, would be to do it using ordinal position in the container, though.