在 li 中获取子标记的 html 内容
Fetch html content of child tag inside li
我有一个列表,如下所示:
<ol id="id1">
<li><strong>aaa</strong><em>bbb<br />ccc</em></li>
<li><strong>111</strong><em>222<br />333</em></li>
</ol>
如何在每个<li>
中获取<em>
标签的 html 内容?
我尝试使用jQuery的.html()
方法,但在我尝试制作的android html5应用程序上表现不一致。上面的Android 5.1能够很好地阅读,但android 4.4.2设备不显示任何内容。
请问有没有另一种获取 html 的方法?
谢谢!
var liElements = document.getElementById("id1").getElementsByTagName("li");
for(var i=0;i<liElements.length;i++){
alert(liElements[i].getElementsByTagName("em")[0].innerHTML);
}
$('li').each(function(){
alert($(this).find('em').html());
});
或
$('li em').each(function(){
alert($(this).html());
});
使用 innerHTML:
var items = document.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
alert(items[i].getElementsByTagName("em")[0].innerHTML);
}
此代码将为您提供所需的内容:
var insideEM = $("li").children("em").html();
答案将是:222<br />333
你可以像这样获取所有 em 元素,然后迭代它们。
$(function(){
$("ol li > em").each(function(index, element){
var em = $(element).html();
alert(em);
});
});
$(function(){
$("ol li > em").each(function(index, element){
var em = $(element).html();
alert(em);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ol id="id1">
<li><strong>aaa</strong><em>bbb<br />ccc</em></li>
<li><strong>111</strong><em>222<br />333</em></li>
</ol>
当然,我认为对于香草JS来说,这是最人性化的缺点:
var $list = document.querySelectorAll("#id1 li em");
document.write("<br />");
for (i = 0; i < $list.length; i++) {
document.write((i+1) + " match: <br />");
document.write($list[i].innerHTML);
document.write("<br />");
}
<ol id="id1">
<li><strong>aaa</strong><em>bbb<br />ccc</em></li>
<li><strong>111</strong><em>222<br />333</em></li>
</ol>
相关文章:
- 如何根据html内容使用ng类-AngularJS
- JavaScript在其他页面上用html内容填充文本框
- Rails:如何在浏览器中显示动态html内容,而不会对其进行转义,也不会引起XSS攻击
- 使用javascript动态创建html内容/元素
- 无法将大型html内容POST到Chrome上的服务器
- 使用li元素的html内容更改该元素的背景
- 如何从ajax返回两个html内容
- jQuery获取子DIV的HTML内容
- HTML内容下推到固定背景图像下方
- 在angular中,使用ng repeat生成动态html内容
- 使用$watch更改html内容
- 如何使用window.showModalDialog()显示HTML内容
- 如何在使用 UIWebView 编辑 HTML 内容时正确调整输入语言更改 (LTR/RTL) 的文本对齐方式
- 获取垂直溢出容器的 html 内容
- 为数组中的每个项目追加 html 内容
- Dojo:在 iframe 加载时解析 HTML 内容
- 允许 Itemp 在 Enyo 中使用 HTML 内容
- 从选项卡中获取 HTML 内容
- 可以将HTML内容放在画布上(登录页)
- 只有当类是硬编码的时,才可以使用jQuery来显示/隐藏html内容