动态读取 div 中的所有 span 元素

Question

我有一个 div 包含多个 span。现在我想读取所有 span 的文本和它们的 id，并将其填充到 JavaScript 映射中，其中 key = spanid，value = "span 的文本"。我该如何实现？

Eg <div mydiv="xyx" >   
     <span id ="sp1" > M/span>
     <span id ="sp2" > M/span>
     .... 
      ..

   </div>

我该如何填充地图？

- akshay

Answer 1

你可以使用document.getElementById和document.getElementsByTagName来获取元素，然后迭代它们并将它们添加到对象中。使用textContent和innerText获取元素的文本，并像这样将它们插入对象中：

var spans = document.getElementById('xyx').getElementsByTagName('span'), 
    obj = {};

for(var i = 0, l = spans.length; i < l; i++){
    obj[spans[i].id] = spans[i].textContent || spans[i].innerText;
}

这里可以看到它的效果：http://www.jsfiddle.net/SJs4h/

- Yi Jiang

Answer 2

var container=document.getElementById('xyx');
var spanArray=container.getElementsByTagName('span');
for(var s=0;s<spanArray.length;s++){
  spanText=spanArray[s].innerHTML;
}

- derekcohen

Answer 3

使用Jquery非常简单：

var spans = $('#xyx').find('span');
var arr = new Array();
 foreach(spans as span)
 {
       arr[$(span).attr('id')] = $(span).text;
 } 

希望我有所帮助。 更新： 没有使用jQuery的方法：

var spans = document.getElementById('xyx');
spans = spans.getElementsByTagName('span');
var arr = new Array();
foreach(spans as span) 
{
   arr[span.getAttribute('id')] = arr[span.innerHTML];
}

- WEBProject

---

@WEB项目 嗯，这段代码有几个问题——在PHP中它可能是完美的，但JavaScript没有关联数组，forEach是ECMAScript 5的特性，不像那样工作，并且new Array比仅仅使用[]更加冗长。 - Yi Jiang