如何用Jquery获取LI的ID及内部标题元素内容？

没问题，我来帮你搞定这个问题~ 你现在的点击功能正常，但没法单独拿到li里的标题文本，核心原因是$(this).text()会获取整个li下的所有文本内容（包括标题和下面的描述文字），我们只需要精准定位标题元素就能解决这个问题：

修改后的JavaScript代码 #

$("#list li").on('click', function() {
 var get_id = $(this).attr('id');
 // 定位li内的h2或h3标题，获取文本并去除多余空格
 var get_title = $(this).children('h2, h3').first().text().trim();
 
 console.log('当前LI的ID:', get_id);
 console.log('标题内容:', get_title);
 // 可以对比看看整个LI的所有文本
 console.log('LI全部文本:', $(this).text().trim());
});

代码细节说明 #

• $(this).children('h2, h3')：只查找当前li的直接子元素里的h2或h3标签，比find()更高效，因为不会遍历所有后代元素
• .first()：确保即使li内有多个标题元素（你的示例里每个li只有一个），也只取第一个标题的内容
• .trim()：去除文本前后的换行、空格，让输出的标题内容更干净整洁

完整可运行示例代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list">
 <li id="myID">
 <h2>Title</h2>
 First One
 </li>
 <li id="myID2">
 <h2>Title 2</h2>
 Two
 </li>
 <li id="myID4">
 <h3>Title 3</h3>
 Tree
 </li>
</ul>

<script>
$("#list li").on('click', function() {
 var get_id = $(this).attr('id');
 var get_title = $(this).children('h2, h3').first().text().trim();
 
 console.log('ID:', get_id);
 console.log('标题:', get_title);
});
</script>

小提醒：我把你原来引入的core.js换成了完整的jquery.min.js，因为core.js只包含最基础的核心功能，可能会导致事件绑定等功能出现异常哦~

内容的提问来源于stack exchange，提问作者Marvio Rocha