如何使用jQuery从id获取html

我有简单的清单：

 
data
 
data
 
data
 
data
  

现在：我如何获取第一个元素的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); }); 

Answer 2

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

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

Answer 3

查看jQuery first-child 选择器 。 特别：

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

Answer 4

试试这个：

 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