如何获取同一个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]

这样的话它得出来的是两个值吧？那要怎么接收它呢？

Answer 11

@shoulder11: getElementsByTagName   有s  是复数   取索引对应的就行了

Answer 12

其实你的js并没有什么问题，问题在于你的两个div的id都是相同的，那肯定只能一个能获取到了。

另外，你这样写太麻烦，用jquery非常简单

function list(id) {
var div = $("#" + id);
$("#CName").val(div.find("strong").text());
$("#BName").val(div.find("span").text());
$("#CNo").val(div.find("a").text());
}

Answer 13

因为主要也想通过学习一些js的内容，但同时也会学习jq的。

非常谢谢~