如何获取同一个div里， 多个不同的子标签的值？

Question

如下面的代码，为父元素<div>设置了id值，它里面有不同的标签<strong>、<span>、<a>等子元素，我要怎么样才能够点击父元素<div>然后能够分别获取到每个子标签的值，并将其赋值到相应的input的文本框内容里。

<div href="#" id="l1" onclick="list(this.id)">
　　<strong >Karitika Anggrain</strong>
　　<span >6222123****1234 </span>
　　<a href="#"> Maybank</a >
</div>

<div href="#" id="l1" onclick="list(this.id)">
　　<strong >Karitika Anggrain</strong>
　　<span >6222123****1234 </span>
　　<a href="#"> Maybank</a >
</div>

<form role="form " class="col-md-4">
<input type="text"  id="CName" name="cname">
<input type="text"  id="BName">
<input type="text"  id="CNo">
</form>

我写的js代码如下，只能获取一个子标签<srong>的值，本想按照同样方法把其他的子标签值也赋给对应input，但发现好像因为id的问题无法实现重复用，所以就只能获取第一个子元素的值。

<script type="text/javascript">
function list(id){
　　var myname=document.getElementById(id).getElementsByTagName("strong")[0].innerHTML;
　　document.getElementById("CName").value=myname;

/*  var  mybank=document.getElementById(id).getElementsByTagName("span")[0].innerHTML;
　　document.getElementById("BName").value=mybank;*/
}
</script>

 

网各位大神帮帮忙，指导指导，非常谢谢！

Answer 1

jquery？

Answer 2

JavaScript最好，不介意的话也可以同时教练jq如何实现，谢谢！

Answer 3

@顾晓北:那jq是怎么实现呢？

Answer 4

@顾晓北: 好的！谢谢提供学习网址~

Answer 5

我理解能力有点差，好像没怎么完全理解你的意思o.0(学习js也不久)，希望能帮到你 1 <script type="text/javascript"> 2 function list(id){ 3 　　var oDiv=document.getElementById(id); 4 var myname = oDiv.firstElementChild.innerHTML; 5 　　document.getElementById("CName").value=myname; 6 var myNumber = oDiv.firstElementChild.nextElementSibling.innerHTML; 7 document.getElementById('BName').value = myNumber; 8 var myBank = oDiv.lastElementChild.innerHTML; 9 document.getElementById('CNo').value = myBank; 10 } 11 </script>        

Answer 6

@shoulder11: <span>可以oDiv.firstElementChild.nextElementSibling.nextElementSibling.innerHTML; 或者oDiv.lastElementChild.previousElementSibling.innerHTML; 当然有多个子元素时，上述方法就不太合适可以考虑使用childNodes属性 第一个标签<img>：oDiv.childNodes[0] //IE 　　　　　　　　　　oDiv.childNodes[1]  //其他浏览器会把元素之间的空白符也会算为子元素 第三个标签<span>:oDiv.childNodes[2] //IE 　　　　　　　　　　oDiv.childNodes[5]  //其他浏览器 其他子元素可以以此类推；  

Answer 7

@shoulder11: 今天学习DOM扩展-专有扩展时，发现其中的children属性可以解决不同浏览器在处理空白符是的差异，所以上述的方法可以写成： 第一个标签<img>：oDiv.children[0]; 第三个标签<span>:oDiv.children[2]; 　　　　　　　　　　

Answer 8

@老板丶鱼丸粗面: 这样，我再去试试，太谢谢了。 TwT不过不好意思，圆豆没有给成你TwT，因为有个方法更加简单并且不需要给div设置id值，我最后用了他的方法。 但还是十分感谢！你也让我学到了很多~ 我也都记下来了嘿嘿。

Answer 9

document.getElementById('XXX').getElementsByTagName('span/strong')[0]   getElementXXX不止针对document哦

Answer 10

document.getElementById('XXX').getElementsByTagName('span/strong')[0] 这样的话它得出来的是两个值吧？那要怎么接收它呢？