7

我有简单的清单：

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

谢谢帮助。

4

4 回答 4

8

似乎您缺少 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);
});

演示- 更新到有效的 id 选择器语法

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

btn.on('click',function(){
    var theHtml = $('#tabs_nav li').eq(0).html();
    console.log(theHTML);
});
于 2013-01-29T23:11:55.427 回答
2

不要将 jQuery 纯粹用作选择器引擎：

btn.onclick = function() {
  console.log(document.getElementById('tabs_nav').children[0].innerHTML);
};
于 2013-01-29T23:09:00.887 回答
1

查看 jQueryfirst-child 选择器。具体来说：

btn.on('click',function(){
    var first_child = $('#tabs_nav li:first-child');
    var first_child_html = first_child.html();
});
于 2013-01-29T23:07:44.307 回答
0

尝试这个：

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

你必须使用:first-child

于 2013-01-29T23:09:10.387 回答