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.

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.

• javascript
• jquery
• html
• getelementbyid

• I don't really understand your question; does your code not work? – Explosion Pills Commented Jan 29, 2013 at 23:08
• second var with first is working, i can't get html by element id... – Lukas Commented Jan 29, 2013 at 23:09

4 Answers 4

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);
});

Don't use jQuery purely as a selector engine:

btn.onclick = function() {
  console.log(document.getElementById('tabs_nav').children[0].innerHTML);
};

Check out the jQuery first-child selector. Specifically:

btn.on('click',function(){
    var first_child = $('#tabs_nav li:first-child');
    var first_child_html = first_child.html();
}); 

Try this:

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li:first-child').attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find(first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

You have tou use :first-child