首页新闻找找看学习计划

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

0
悬赏园豆:20 [已解决问题] 解决于 2016-09-10 17:13

如下面的代码,为父元素<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>

 

网各位大神帮帮忙,指导指导,非常谢谢!

shoulder11的主页 shoulder11 | 初学一级 | 园豆:181
提问于:2016-09-10 11:12
< >
分享
最佳答案
1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div href="#" onclick="list(this)">
        <strong>Karitika Anggrain</strong>
        <span>6222123****1234 </span>
        <a href="#"> Maybank</a>
    </div>

    <div href="#" onclick="list(this)">
        <strong>Karitika Anggrain</strong>
        <span>6222123****1234 </span>
        <a href="#"> Maybank</a>
    </div>
</body>
</html>
<script>
    function list(dom) {
       
        var strong = dom.getElementsByTagName("strong")[0].innerHTML;
        var span = dom.getElementsByTagName("span")[0].innerHTML;
        var a = dom.getElementsByTagName("a")[0].innerHTML;

        alert(strong);
        alert(span);
        alert(a);
    }
</script>

收获园豆:20
小小高 | 菜鸟二级 |园豆:436 | 2016-09-10 13:30

firefox里面没问题。。不知道理解对了没有。。

小小高 | 园豆:436 (菜鸟二级) | 2016-09-10 13:31

@小小高: 谢谢!理解是对的,

但是为什么我还没有弄成功呢T。T

请问其中的list(dom),其中的dom是什么意思呢?

shoulder11 | 园豆:181 (初学一级) | 2016-09-10 15:28

@shoulder11: 当前dom对象呀,指的你点击的哪个div

小小高 | 园豆:436 (菜鸟二级) | 2016-09-10 15:57

@小小高: 这方法我觉得挺好的,就不用设div的id值了。

我用的谷歌浏览器,但是出不来alert的弹出对话框T。T

shoulder11 | 园豆:181 (初学一级) | 2016-09-10 16:10

@shoulder11: 

小小高 | 园豆:436 (菜鸟二级) | 2016-09-10 16:13

@shoulder11: 你要点击div要。。我的chrome可以呀。。

小小高 | 园豆:436 (菜鸟二级) | 2016-09-10 16:14

@shoulder11: 

小小高 | 园豆:436 (菜鸟二级) | 2016-09-10 16:14

@小小高: 

小小高 | 园豆:436 (菜鸟二级) | 2016-09-10 16:16

@小小高:

这种方法也成功了!非常感谢~

我又敲了一遍,之前可能因为书写的原因

谢谢指教!

shoulder11 | 园豆:181 (初学一级) | 2016-09-10 17:08
其他回答(4)
0

jquery?

顾晓北 | 园豆:9520 (大侠五级) | 2016-09-10 11:30

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

支持(0) 反对(0) shoulder11 | 园豆:181 (初学一级) | 2016-09-10 11:34

@shoulder11: jquery简单,至于js,自己搜吧,太麻烦

http://www.itxueyuan.org/view/6349.html

支持(0) 反对(0) 顾晓北 | 园豆:9520 (大侠五级) | 2016-09-10 11:37

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

支持(0) 反对(0) shoulder11 | 园豆:181 (初学一级) | 2016-09-10 11:48

@shoulder11: jq就简单多了啊,http://www.w3school.com.cn/jquery/jquery_selectors.asp

其实你需要搜索“jquery选择器”

支持(0) 反对(0) 顾晓北 | 园豆:9520 (大侠五级) | 2016-09-10 11:56

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

支持(0) 反对(0) shoulder11 | 园豆:181 (初学一级) | 2016-09-10 16:07
1

我理解能力有点差,好像没怎么完全理解你的意思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>

 

 

 

 

老板丶鱼丸粗面 | 园豆:202 (菜鸟二级) | 2016-09-10 13:19

谢谢!我一时刚学一点点基础,好多都不懂呢~

如果是这种方法的话,只能获取第一个、第二个与最后一个子标签,若是如果我有四个的话

<div href="#" id="l1" onclick="list(this.id)">

  <img src="..."/>
  <strong >Karitika Anggrain</strong>
  <span >6222123****1234 </span>
  <a href="#"> Maybank</a >
</div>

第二个标签<strong>可以oDiv.firstElementChild.nextElementSibling.innerHTML;

第三个标签<span>那么又要怎么做呢?

支持(0) 反对(0) shoulder11 | 园豆:181 (初学一级) | 2016-09-10 14:55

@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]  //其他浏览器

其他子元素可以以此类推;

 

支持(1) 反对(0) 老板丶鱼丸粗面 | 园豆:202 (菜鸟二级) | 2016-09-10 15:18

@shoulder11: 啊啊不好意思,刚刚造成那样的问题是因为我忘记加上.innerHTML了!

嘿嘿,谢谢指教!

支持(0) 反对(0) shoulder11 | 园豆:181 (初学一级) | 2016-09-10 16:38

@老板丶鱼丸粗面: 

@shoulder11: 啊啊不好意思,刚刚造成那样的问题是因为我忘记加上.innerHTML了!

嘿嘿,谢谢指教!

支持(0) 反对(0) shoulder11 | 园豆:181 (初学一级) | 2016-09-10 16:38

@shoulder11: 今天学习DOM扩展-专有扩展时,发现其中的children属性可以解决不同浏览器在处理空白符是的差异,所以上述的方法可以写成:

第一个标签<img>:oDiv.children[0];

第三个标签<span>:oDiv.children[2];

          

支持(0) 反对(0) 老板丶鱼丸粗面 | 园豆:202 (菜鸟二级) | 2016-09-11 17:26

@老板丶鱼丸粗面: 这样,我再去试试,太谢谢了。

TwT不过不好意思,圆豆没有给成你TwT,因为有个方法更加简单并且不需要给div设置id值,我最后用了他的方法。

但还是十分感谢!你也让我学到了很多~

我也都记下来了嘿嘿。

支持(0) 反对(0) shoulder11 | 园豆:181 (初学一级) | 2016-09-11 17:34
0

document.getElementById('XXX').getElementsByTagName('span/strong')[0]  

getElementXXX不止针对document哦

野兽' | 园豆:227 (菜鸟二级) | 2016-09-10 14:19

document.getElementById('XXX').getElementsByTagName('span/strong')[0]

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

支持(0) 反对(0) shoulder11 | 园豆:181 (初学一级) | 2016-09-10 14:38

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

支持(0) 反对(0) 野兽' | 园豆:227 (菜鸟二级) | 2016-09-10 21:39
1

其实你的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());
}

balahoho | 园豆:2048 (老鸟四级) | 2016-09-10 15:04

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

非常谢谢~

 

 

 

支持(0) 反对(0) shoulder11 | 园豆:181 (初学一级) | 2016-09-10 15:41
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册