如何使用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);
});

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