如何使用jQuery从id获取html

Question

我有简单的清单:

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

现在:我如何获取第一个元素的html,具体取决于ID.我想补充说,只需点击按钮,所有ID都会动态变化.这是我的代码:

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

谢谢你的帮助.

Answer 1

好像你错过了id选择器#.

您正试图从选择器获取html:

ladder_nav_tabs.find(first_ladder_element_inset_id).html();

这不适用于id选择器需要的#.像这样:

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

请尝试以下操作来修复您的代码:

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 - 更新为有效的id选择器语法

或者,您可以使用jQuery的eq缩短代码,类似于:

btn.on('click',function(){
    var theHtml = $('#tabs_nav li').eq(0).html();
    console.log(theHTML);
});