Question

我想改变我的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>

我需要改变约翰的细节。图像和文字。
我了解到我能找到约翰的DIV：

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

现在我可以访问该对象：

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

并找到它的孩子......

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

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

avatar的 img src
名称
位于text1类中的年龄和性。

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

有什么想法吗？

Answer 1

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

Answer 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');

Answer 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')

Answer 4

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

Answer 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");

Answer 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');
});

更改DIV的内容

6 个答案: