如何使用jQuery根据id获取元素的html

Question

如何使用jQuery根据id获取元素的html

8

我有一个简单的列表：

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

现在：如何根据 ID 获取第一个元素的 HTML。我需要补充说明的是，所有 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);
});

感谢您的帮助。

- Lukas

我并不是很理解你的问题；你的代码是不是不能正常工作？ - Explosion Pills

第二个变量与第一个变量一起工作，我无法通过元素ID获取HTML... - Lukas

4个回答

2

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

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

- Niet the Dark Absol

1

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

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

- Kyle

@ŁukaszBorawski，不需要绕圈子了。选择器会给你元素，你只需要直接从中获取HTML即可。 - Alexander

不需要再次下载第一个元素的HTML，只需下载具有特定ID的HTML元素... - Lukas

@ŁukaszBorawski，这是相同的。 - Alexander

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

- Alessandro Minoccheri

和其他的一样。你忽略了明显重复的 ladder_nav_tabs.find()，这是不可接受的。 - Alexander

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nope · Accepted Answer

看起来你缺少了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);
});