заменить текст div другим div в div jquery onload

Question

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

Я хочу изменить текст B на текст A и текст D на C текст на jquery. Я добавил этот скрипт:

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

, но он меняет текст в обоих основных div

Answer 1

Проблема в том, что когда вы используете text (), он вернет первый элемент в коллекции. Он не имеет ни малейшего понятия, что вы хотите захватить его для других элементов. Поэтому вам нужно закодировать его, чтобы разобраться со связями.

Вам нужно будет l oop для каждой группы и выбрать каждого в группе.

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

Другой вариант - выбрать все элементы и l oop 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>

и без каждого

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>

Answer 2

Проблема в том, что ваш код выбирает все .first элементы.

Чтобы устранить проблему, вы можете выбрать второй div в каждом блоке .main и предоставить функцию для text(), которая возвращает текст предыдущего родственного брата. Попробуйте это:

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

Обратите внимание, что классы .first и .second больше не нужны при таком подходе

Answer 3

Здесь вы можете попробовать l oop поверх .main, получить элемент .first и .second и поменять местами значения.

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>