获取内部范围的文本
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
的方法吗?谢谢
更新:后续问题
所以这个超越的重点是,我想添加一个检查,如果页面是"订单历史记录",但导航菜单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;
}
}
}
}
}
更改类名位不起作用!我做错了吗?
更新 2:
修复,这是我的愚蠢错误:
更改了以下内容的顺序:
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);
}
}
JSBin
http://jsbin.com/epoxej/edit#preview
相关文章:
- Angular JS-文本框未在独立范围内更新
- 如何在JavaScript中获取文本区域的选定文本范围
- 对象内部函数内的对象文本的范围
- 如何按从当前单词到段落中该句子(.)结尾的范围选择文本
- 如何在 Chrome 的文本区域中“替换”选定的文本范围
- 根据输入范围更新显示的文本量
- 返回Javascript中给定正则表达式的文本范围数组
- 根据输入范围更新显示的文本量
- 如何使用javascript将文本框中的值限制为1-999之间的值范围
- 使用jQuery获取h4 class=“”的文本内容;ng结合”;超出Angular范围
- 如何允许用户在文本框中插入角度范围变量
- WKHTMLTOPDF - 添加一个侧边栏,该侧边栏跟随不同的文本范围
- 目标C - UIWebview - 将javascript文本范围转换为目标c对象,反之亦然
- 如何删除所选文本范围中的类属性
- Javascript:如何获取所选文本范围之外的文本
- 具有重叠文本范围的解决方案
- 文本范围选择空设计不能在ie7,8中工作
- 在Javascript中,我需要一个RegEx来删除具有多个外观的两个文本(范围)之间的字符串中的文本
- OfficeJs/WordJs通过索引和绑定单击事件选择文本范围
- 未在 Web 浏览器控件中选择/突出显示文本范围