获取 <a> 标签的内部 HTML答案

【问题标题】：Get the inner HTML of an <a> tag获取 <a> 标签的内部 HTML
【发布时间】：2014-03-06 17:13:27
【问题描述】：

我正在为响应式页面构建一个动态菜单，其中左侧菜单隐藏并使用slicknav 解决方案变成不同的菜单。

现在，我要做的是让左侧菜单的第一个链接成为菜单的标题。

因为菜单是硬编码的，所以我不能给我需要 ID 的标签，所以我需要一个不同的解决方案来找到它的内部 HTML。

这是我拥有的 HTML：

<ul id="child_nav">
<li class="nav-title"><a href="#">My List title</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>

这就是我已经能够通过一些编程来使菜单标签成为上面 HTML 中的“我的列表标题”的原因：

<script type="text/javascript">
$(document).ready(function(){
var E = document.getElementsByClassName('nav-title').innerHTML;

        $('#child_nav').slicknav({
            label: E
        });
});
</script>

我错过了什么？

【问题讨论】：

标签： javascript jquery html mobile responsive-design

【解决方案1】：

getElementsByClassName 是复数，它返回 all 具有给定类名的元素，因此它返回 NodeList 而不是单个 HTML 元素。

您需要将其视为一个数组，然后将第一项从其中拉出或使用for 循环遍历它。

另外，由于您使用的是 jQuery，所以只需使用 jQuery。 html() 方法将为您提供 jQuery 对象中第一个元素的内部 HTML。

jQuery('.nav-title').html()

【讨论】：

【解决方案2】：

由于您已经在使用 jQuery，请使用它的选择器来查找单个元素，而不是 getElementsByClassName，它可以返回多个元素。

$("#child_nav li.nav-title:first a").text();

小提琴：http://jsfiddle.net/KrFs9/

【讨论】：

【解决方案3】：

试试看

$(".child_nav li a:first").html()

【讨论】：

【解决方案4】：

<script type="text/javascript">
    $(document).ready(function(){

        var title = $('#child_nav .nav-title a:first').html();

        $('#child_nav').slicknav({
            label: title
        });
    });
</script>

【讨论】：

【解决方案5】：

这应该完成它：

var myLabel = $('.nav-title:first').html()

【讨论】：