Question

我有一个带标签的多个li标签，因为跨度在li标签内，它们具有相同的id名称。我希望能够在选择特定li标签时获取span标签内的值。这是我的HTML 代码

<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);

}

没有将文本放在span标记内感谢

Answer 1

由于您为多个元素提供相同的id，因此无法预测调用GetElementById将返回哪个元素。您需要重新构建标记，以避免为多个元素提供相同的ID。

Answer 2

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]");

Answer 3

您可以将事件侦听器（https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener）添加到li的click事件中，并将子span节点中的全局变量设置为选择值。您可以使用类名（<span class="isSelected"></span>）或data-*（<span data-selected="true"></span>）来表示在点击事件期间“选择”了哪个范围。第一个很好，因为您只需根据需要更改该值。第二个要求您解析DOM并在每次选择更改时替换该属性或类。

从多个span标记获取标题值

3 个答案: