1

我想更改我的 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 的内部元素

  • 头像的img src
  • 名字_
  • text1 类中的年龄和性别。

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

有任何想法吗？

4

6 回答 6

4

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

于 2013-06-28T14:29:13.580 回答
3 
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');
于 2013-06-28T14:30:18.550 回答
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()or.html()方法来更新那些 div。例如：更改名称使用itemName.text('New Name')

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

于 2013-06-28T14:30:41.760 回答
0 
var johnsDiv = $('#one'); 
johnsDiv.find('img').attr("src", "http://newurl.com"); 
johnsDiv.find('.name').text("New Name"); 
johnsDiv.find('.age').text("17");
于 2013-06-28T14:33:14.537 回答
0

为了改变所有：

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");
于 2013-06-28T14:33:16.770 回答
0 
$( "#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');
});
于 2013-06-28T14:36:36.290 回答