如何使用jQuery获取列表项的innerHTML？JS列表筛选代码相关咨询

嘿，我来帮你搞定这个问题！

首先得说，jQuery里其实不用直接操作原生的innerHTML属性，它封装了更易用的.html()方法来获取或设置元素的HTML内容。下面分场景给你说明：

1. 获取单个列表项的HTML内容 #

如果是选中特定的<li>元素，比如通过id、类名或者其他选择器，直接调用.html()就能拿到它的innerHTML：

// 举个例子：获取id为"myListItem"的li的HTML内容
var liHtml = $('#myListItem').html();
console.log(liHtml); // 输出这个li里的所有HTML内容

2. 结合你的搜索筛选需求改写代码 #

看你提供的原生JS代码是要实现输入框搜索、筛选列表项的功能，用jQuery可以把这个逻辑简化很多，不用手动写for循环遍历DOM。先提一句，你代码里的a.inne...应该是笔误，应该是a.innerHTML对吧？下面给你改成jQuery版本：

jQuery实现搜索筛选的代码 #

// 监听输入框的输入事件（输入内容时实时触发）
$('#inputSerachBox').on('input', function() {
  // 获取输入的关键词并转成大写，方便不区分大小写匹配
  var filter = $(this).val().toUpperCase();
  
  // 遍历目标ul下的所有li元素
  $('#ulWithItems li').each(function() {
    // 拿到当前li下第一个a标签的HTML内容，同样转成大写
    var itemContent = $(this).find('a:first').html().toUpperCase();
    
    // 判断关键词是否匹配，匹配就显示，不匹配就隐藏
    if (itemContent.indexOf(filter) !== -1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

额外小提示 #

• 如果你只需要获取列表项的纯文本内容（不需要HTML标签），可以用.text()方法代替.html()，这样更干净：

  var liText = $('#myListItem').text();
  

• jQuery的选择器非常灵活，比如$('#ulWithItems li a:first')可以直接选中目标ul下所有li里的第一个a标签，比原生的getElementsByTagName简洁多了。

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