0

我在数组中有 DOM 元素

this.object = 
     <div>
     <span class="color">"color1</span> 
     <span class="text">text1</span>
     </div>

     <div>
     <span class="color">"color2</span> 
     <span class="text">text2</span>
     </div>

     <div>
     <span class="color">"color3</span> 
     <span class="text">text3/span>
     </div>

     <div>
     <span class="color">"color4</span> 
     <span class="text">text4</span>
     </div>

此 DOM 存在于 DOM 数组中（ this.object ）

如何仅更新数组中的第一个跨度或仅第二个跨度，我无法使用我的程序技术问题中的 ID。

我尝试使用 this.element.children[i]，但后来我不知道如何找到第一个或第二个跨度

4

5 回答 5

2

您将用于this.element[i]访问数组中的任何元素，然后您可以访问这些元素的子元素：

this.element[0].childNodes[0].innerHTML = "paint one";
于 2012-08-05T08:55:13.707 回答
1

您可以使用querySelectors：

//find first element with class 'color' within a div
//returns an element Node
[yourdiv].querySelector('.color');
//find all elements with class 'color' within a document
//returns a nodeList
document.querySelectorAll('.color');

或getElementsByClassName：

//find first element with class 'color' within a div
//returns a nodeList with 1 or more elements
[yourdiv].getElementsByClassname('.color')[0];
//find all elements with class 'color' within a document
//returns a nodeList
document.getElementsByClassName('.color');
于 2012-08-05T08:41:54.003 回答
1

你可以使用getElementsByClassName().

document.getElementsByClassName("color")[0];

但是你必须记住两件事：1.)getElementsByClassName()不完全跨浏览器兼容。2.）你有两个知道你的color元素在什么位置。color如果您仅在示例完美运行后才使用该类。

两个解决问题 1.) 您可以使用以下解决方法：

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
于 2012-08-05T08:42:07.503 回答
1

使用 jQuery 来避免任何跨浏览器问题。假设你有 div，使用div.find('span:eq(1)');

工作示例。

多个项目的工作示例。

显示正在更新的文本的另一个示例。

于 2012-08-05T08:34:09.797 回答
1

你应该使用jquery，然后你可以这样写：

$('.color').html('updated text')
于 2012-08-05T08:34:25.997 回答