獲取<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>