Question

39

How to get html from element by id with jQuery

rated 0 times [ 45] [ 6] / answers: 1 / hits: 32303 / 12 Years ago, tue, january 29, 2013, 12:00:00

I have simple list:

<ul id=tabs_nav>

    <li id=t_00>data</li>

    <li id=t_01>data</li>

    <li id=t_02>data</li>

    <li id=t_03>data</li>

</ul>

Now: How do I get the html of the first element, depending on what is ID. I would add that all of ID's change dynamically with the click of the button. This is my code:

btn.on('click',function(){

    var ladder_nav_tabs = $('#tabs_nav'),

        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),

        first_ladder_element_inset_html = ladder_nav_tabs.find(first_ladder_element_inset_id).html();

    console.log(first_ladder_element_inset_html);

});

Thx for help.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nellykaliae

Add To Favorites

Follow

Total Points: 119

Total Questions: 95

Total Answers: 103

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

answered 12 Years ago alexandreah · Accepted Answer

Seems you are missing the id selector #.

You are trying to get the html from the selector:

ladder_nav_tabs.find(first_ladder_element_inset_id).html();

This won't work as an id selector needs the #. Like this:

ladder_nav_tabs.find(# + first_ladder_element_inset_id).html();

Try the following to fix your code:

btn.on('click',function(){

    var ladder_nav_tabs = $('#tabs_nav'),

        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),

        first_ladder_element_inset_html = ladder_nav_tabs.find(# + first_ladder_element_inset_id).html();

    console.log(first_ladder_element_inset_html);

});

DEMO - Updating to valid id selector syntax

Alternatively you could shorten your code using jQuery's eq, similar to this:

btn.on('click',function(){

    var theHtml = $('#tabs_nav li').eq(0).html();

    console.log(theHTML);

});