更改 DIV 的内容

Posted 2023-03-05

【中文标题】更改 DIV 的内容

【英文标题】：Changing a DIV's content

【发布时间】：2013-06-26 08:43:40

【问题描述】：

我想更改我的 DIV。

<div id="main">
       <div id="one"> 
               <div class="red"> ... </div>
               <img class="avatar" src="img/avatar1.jpg"/>
               <span class="name"> John </span>
               <div class="text1">
                       <span class="age"> 16 </span>
                       <span class="sex"> male </span>
               </div>
       </div> 
       <div id="two"> 
               <div class="green"> ... </div>
       </div> 
       .
       .
       <div id="three"> 
               <div class="blue"> ... </div>
       </div> 
</div> 

我需要更改约翰的详细信息。图片和文字。 我知道我可以找到 John 的 DIV：

var item = $('#one');
var itemIndex = $('#main > div').index(item);

现在我可以访问该对象了：

$( "#feeds > div" ).get( itemIndex );

然后去找它的孩子……

$( "#feeds > div" ).get( itemIndex ).children;

我不知道如何开始改变div的内部元素

头像的

img src

名称

属于 text1 类的

年龄

和

性别

。

我也觉得使用索引访问元素很麻烦，我想我可以简单地通过主ID找到它，然后进行操作。

有什么想法吗？

【问题讨论】：

我想你想通过 ajax 从你的服务器获取新信息，我建议使用类似 mustache.js 的东西来促进你的工作......如果你不打算用AJAX，但已经以某种方式处理了 JS 中的所有数据，那么我认为最好的方法是编写所有 html（=所有数据项的相同 div）并仅显示您想要的项目，同时隐藏所有其他项目。

【参考方案1】：

试试$('#one .name').text('whatever text you want');

【参考方案2】：

var $div  = $( "#feeds > div" ).get( itemIndex );
$div.find('.avatar').prop('src','new src');
$div.find('.name').text('new name');
$div.find('.age').text('new age');
$div.find('.sex').text('new sex');

【参考方案3】：

var item = $('#one'); //Got John details container
var itemAvatar = item.find ('img'); //Got the Avatar
var itemName = item.find('.name'); //Got the Name div
var itemAge = item.find('.age'); //Got the age div
var itemSex = item.find('.sex'); //Got the age div

不使用.text() 或.html() 方法来更新这些div。 例如：要更改名称，请使用itemName.text('New Name')

要更改图像.. 使用itemAvatar.prop('src', 'next image url')

【讨论】：

所有解决方案中最高效的选择器。 +1

@Vega，您能否解释一下为什么使用find 而不是@danwoods 解决方案？

@Ted 没什么特别的.. Danwoods $('#one .name') 将在内部使用.find 我也减少了对$('#one') 的调用，因为它保存在item 中。

【参考方案4】：

var johnsDiv = $('#one'); 
johnsDiv.find('img').attr("src", "http://newurl.com"); 
johnsDiv.find('.name').text("New Name"); 
johnsDiv.find('.age').text("17"); 

【参考方案5】：

为了改变所有：

var newTxt = "yourNewTxt";
var newSrc = "yourNewSource";

$("#main > div").each(function() 
    $(".name",this).text(newTxt);
    $(".avatar",this).attr("src",newSrc);
);

只是改变约翰（div#one）：

$("#one .name").text("yournewtext");
$("#one .avatar").attr("src", "yournewsource");

【参考方案6】：

$( "#main > div" ).each(function()
     $div.find('.avatar').prop('src','new src');
     $div.find('.name').text('new name');
     $div.find('.age').text('new age');
     $div.find('.sex').text('new sex');
);