CODEWITHSUNDEEP
javascriptjqueryhtmlmobileresponsive-design
user3389286
user3389286

Reputation: 33

Get the inner HTML of an <a> tag

I am building a dynamic menu for a responsive page in which the left side menu hides and turns into a different menu using the slicknav solution.

Now, what I want to do is for the left menu's first link to become the title of the menu.

I can't give the tag that I need an ID because the menu is hard coded, so I need a different solution to find the inner HTML of it.

This is the HTML that I have:

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

And this is what I've been able to do with some programing to get the label of the menu to be the "My List Title" from the HTML above:

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

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

What am I missing?

Upvotes: 0

Views: 3786

Answers (5)

Harvey A. Ramer
Harvey A. Ramer

Reputation: 772

This should accomplish it:

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

Upvotes: 0

nwalton
nwalton

Reputation: 2061

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

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

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

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

try like

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

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

Since you're already using jQuery, use its selector to find the single element instead getElementsByClassName, which can return multiple elements.

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

Fiddle: http://jsfiddle.net/KrFs9/

Upvotes: 1

Quentin
Quentin

Reputation: 944010

getElementsByClassName is plural, it returns all the elements with the given class name, so it returns a NodeList not a single HTML Element.

You need to treat it like an array and either pull the first item off it or loop over it with for.

Alternatively, since you are using jQuery, just use jQuery. The html() method will give you the inner HTML of the first element in the jQuery object.

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

Upvotes: 4

Related Questions