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

既然你已經使用jQuery，使用它的選擇找到單個元素，而不是getElementsByClassName，它可以返回多個元素。

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

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

Answer 2

getElementsByClassName是複數，則返回所有給定類名的元素，所以它返回一個節點列表不是一個單一的HTML元素。

您需要像對待數組一樣對待它，或者將第一個項目從它上拉下來，或者用for對其進行循環。

另外，由於您使用jQuery，只需使用jQuery。 html()方法將爲您提供jQuery對象中第一個元素的內部HTML。

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

Answer 3

這應該完成它：

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

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>