从多个span标签获取标题值
我有一个带有标签的多个li标签,因为跨度在li标签内,它们具有相同的id名称。 我希望能够在选择paticular li标签时获得span标签内的值。 这里我的HTML 代码从多个span标签获取标题值
<li>
<form action="" method="post" name="topdivform">
<span id="editedpart" title="first div"><a href="#" title="edit" id="edit" onclick="showeditpage()">first div</a></span>
</form>
</li>
<li>
<form action="" method="post" name="topdivform">
<span id="editedpart" title="second div"><a href="#" title="edit" id="edit" onclick="showeditpage()">second div</a></span>
</form>
</li>
<li>
<form action="" method="post" name="topdivform">
<span id="editedpart" title="third div"><a href="#" title="edit" id="edit" onclick="showeditpage()">third div</a></span>
</form>
</li>
,这里是我的javascript
var elem = document.getElementById("editedpart");
var str ="";
for(var i = 0; i< elem.length; ++i){
str = elem[i].innerText;
alert(str);
}
它没有得到文本insidethe span标签 感谢
既然你给同一个ID多个元素,无法预测调用GetElementById将返回哪个元素。您需要重构标记以避免给多个元素使用相同的ID。
Lyn Headley,我该怎么做,以便我可以在不写太多代码的情况下获得价值 – user1496307 2013-04-28 05:07:53
@ user1496307您应该关注如何编写尽可能多的代码。 =) – Yatrix 2013-04-28 05:30:52
var elem = document.getElementsByName("topdivform");
var str ="";
for(var i = 0; i< elem.length; ++i){
str = elem[i].textContent || elem[i].innerText;
alert(str);
}
如果您需要在您的DOM选择更具体的,你可以使用querySelectorAll()
,虽然它不是在IE6/7的支持。
var elem = document.querySelectorAll("li > form[name=topdivform] > span > a[title=edit]");
我不是,我使用你的方法,但它要么显示第一个跨度或最后一个 – user1496307 2013-04-28 05:22:08
你可以添加一个事件侦听(https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener)到李的click事件,并设置为从您选择值的子跨度节点的全局变量。您可以使用类名称(<span class="isSelected"></span>
)或data-*
(<span data-selected="true"></span>
)来表示点击事件期间哪个跨度是“被选中”的。第一个很好,因为你只是根据需要改变这个值。第二个要求您解析DOM,并在每次选择更改时替换该属性或类。
[jQuery。](http://jquery.com)另外,没有两个元素应该共享'id'。 – michaelb958 2013-04-28 05:02:48
'document.getElementById'返回单个对象。你不能像这样使用,Id应该是唯一的。 – Sachin 2013-04-28 05:03:18
而不是将id用于“editedpart”,请使用data- *属性或class属性。 – Yatrix 2013-04-28 05:32:51