[英]Getting the text of an inner span
如果我有以下链接:
<a href="#" onclick="return navigateTo(this)" id="menuList:0:menu" class="normalLink">
<span id="menulist:0:menuLabel">
<span > Main Page </span>
</span>
</a>
<a href="#" onclick="return navigateTo(this)" id="menuList:1:menu" class="normalLink">
<span id="menulist:1:menuLabel">
<span > Search Orders </span>
</span>
</a>
<a href="#" onclick="return navigateTo(this)" id="menuList:2:menu" class="selectedLink">
<span id="menulist:2:menuLabel">
<span > Orders History </span>
</span>
</a>
我想要获取具有类名称selectedLink
的元素,然后获取该元素的内部span
的值,该值在上面的示例“示例Order History
。
我可以做的第一部分是找到具有selectedLink
类的元素,但是无法检索该元素内部范围内的文本。 下面是我的代码,用于查找具有selectedLink
类的元素:
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++)
{
var classes = elem[i].className;
if(classes == 'selectedLink' ){
alert("ok found it the selected link");
}
}
谁能建议一种检索Order History
? 谢谢
因此,这excerise的一点是,我想添加一个检查,其中如果页面是“订单历史记录”,但导航菜单已经selectedLink
应用到另一个页面样式(当用户按下BACK情况),我想JavaScript逻辑来解决问题所以下面是我的代码:
//get the element that has "selectedLink" style
// if the text says "Order History" then style is applied ok
var elems = document.getElementsByClassName("selectedLink");
if(typeof elems != "undefined"){
for(var i = 0; i < elems.length; i++){
alert(elems.length);
var text = elems[i].innerText || elems[i].textContent;
alert(text);
if(text == "Order History"){
alert("its ok");
}
else { //we're here because the element that has "selectedLink" style in not "order History"
//get all elements that have "normalLink" style and see which one is "Order History"
var allLinks = document.getElementsByClassName("normalLink");
for(var j = 0; j < allLinks.length; j++ ){
var curText = allLinks[j].innerText || allLinks[j].textContent;
if(curText == "Order History"){
alert("there it is at counter " + j);
alert(allLinks[j].innerText);
//swap the class names
allLinks[j].className = "selectedLink";
elems[i].className = "normalLink";
break;
}
}
}
}
}
更改类名称位不起作用! 我做错了吗?
已修正,这是我的愚蠢错误:
更改了以下顺序:
allLinks[j].className = "selectedLink";
elems[i].className = "normalLink";
至:
elems[i].className = "normalLink";
allLinks[j].className = "selectedLink";
首先,只需使用getElementsByClassName()
来获取元素,这可以节省大量的工作量:
var link = document.getElementsByClassName("selectedLink")[0]; // new browsers only
var link = document.querySelector(".selectedLink"); // more support, but not in IE7 or lower
var link = $(".selectedLink"); // with jQuery
然后,由于该文本是唯一的文本,因此您可以只使用textContent
(在旧版IE中为innerText
)
您的最终代码是其中之一,具体取决于目标浏览器以及是否具有框架:
var text = link.textContent; // new browsers
var text = link.innerText || link.textContent; // older browers
var text = link.text(); // jQuery
对于jquery来说,这听起来很完美。 在页面上添加jquery库,然后使用以下代码:
var text = $('.selectedLink').first('span').first('span').html();
尝试这个:
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++)
{
var classes = elem[i].className;
if(classes == 'selectedLink' ){
alert("ok found it the selected link");
var a = elem[i].getElementsByTagName('span')[1].innerHTML;
alert(a);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.