为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

海绵宝宝撒 2024-01-22 15:53:07
<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());但它改变了两个主分区中的文本
查看完整描述

3 回答

?
慕婉清6462132

TA贡献1804条经验 获得超2个赞

问题是当您使用 text() 时,它将返回集合中的第一项。它不知道你想抓住它来获取其他元素。因此,您需要对其进行编码来处理关系。


您必须循环遍历每个组并选择该组中的每个组。


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


其他选项是选择所有元素并循环


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>


查看完整回答
反对 回复 2024-01-22
?
一只名叫tom的猫

TA贡献1906条经验 获得超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



查看完整回答
反对 回复 2024-01-22
?
aluckdog

TA贡献1847条经验 获得超7个赞

在这里,您可以尝试循环.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>


查看完整回答
反对 回复 2024-01-22
  • 3 回答
  • 0 关注
  • 81 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信