获取<a>标签</a>的内部HTML

Question

我正在为响应页面构建一个动态菜单，其中使用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>

我想念什么？

Answer 1

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

您需要将其像一个数组一样对待，或者将第一项从数组中拉出，或者使用for对其进行循环。

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

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

Answer 2

这应该完成它：

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

Answer 3

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

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

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

Answer 4

尝试像

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

Answer 5

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

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

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