将 div 文本替换为 div jquery onload 中的另一个 div

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>

我想用 jquery 将 B 文本更改为 A 文本，将 D 文本更改为 C 文本。我添加了这个脚本：

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

但它改变了两个主分区中的文本

Answer 1

问题是当您使用 text() 时，它将返回集合中的第一项。它不知道你想抓住它来获取其他元素。因此，您需要对其进行编码来处理关系。您必须循环遍历每个组并选择该组中的每个组。$(".main").each( function () {&nbsp; var elem = $(this)&nbsp; var text = elem.find(".second").text()&nbsp; 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>其他选项是选择所有元素并循环var firsts = $(".first")var seconds = $(".second")firsts.each( function (index) {&nbsp; $(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) {&nbsp; 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() {&nbsp; return $(this).prev().text();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="main">&nbsp; <div class="first">A text</div>&nbsp; <div class="second">B text</div></div><div class="main">&nbsp; <div class="first">C text</div>&nbsp; <div class="second">D text</div></div>请注意，使用此方法不再需要.first和类.second

Answer 3

在这里，您可以尝试循环.main，获取.first和.second元素并交换值。jQuery(function($) {&nbsp; &nbsp; &nbsp;$.each( $('.main'), function() {&nbsp; &nbsp; var $first&nbsp; = $(this).find('.first');&nbsp; &nbsp; var firstHTML = $($first).html();&nbsp; &nbsp; &nbsp; &nbsp; var $second = $(this).find('.second');&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $($second).html(firstHTML);&nbsp; });&nbsp;&nbsp;});<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>