如何使用 jQuery 通过 id 从元素中获取 html

How to get html from element by id with jQuery

本文关键字：元素 获取 html id 何使用 jQuery 通过      更新时间：2023-09-26

我有一个简单的列表：

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

谢谢你的帮助。

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

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

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

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

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

试试这个：

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

相关文章：