排查移除最后<li>标签内<hr>标签的JavaScript代码问题

我来帮你拆解代码里的问题，一步步搞定移除最后一个<li>里的<hr>这个需求～

1. HTML结构的核心错误：ID使用不当 #

你现在把id="streamers"加到了单个<li>上，但实际你要生成多个列表项。ID是页面唯一标识，不能重复，而且你后续是往这个<li>里插入所有生成的内容，导致最终HTML结构完全混乱（所有新生成的<li>都被嵌套在这个带ID的<li>里）。

正确的做法是把id="streamers"给<ul>标签，因为我们要往列表容器里添加多个列表项：

<!-- 错误原结构 -->
<ul>
  <li id="streamers"></li>
</ul>

<!-- 修正后 -->
<ul id="streamers"></ul>

2. JS生成HTML的逻辑错误：<hr>的位置与冗余添加 #

你当前的循环会给每个主播都生成<li>xxx</li><hr>，这会导致两个问题：

• <hr>是直接放在<ul>里的，不符合HTML规范（<ul>的子元素只能是<li>）
• 最后一个<li>后面也会带<hr>，后续还要额外处理隐藏

更合理的逻辑是：仅给非最后一个<li>添加<hr>，这样从源头就避免了多余的<hr>，不用再后续隐藏。

3. JS选择器错误：无法定位目标<hr> #

你写的$("#streamers:last-child hr")完全不对：

• #streamers是<ul>，它不是任何元素的:last-child
• 就算<hr>是<ul>的子元素，正确的选择器也应该是$("#streamers hr:last-child")，但这不如在生成时就避免更高效

4. 冗余代码：无意义的css()调用 #

你写了$(".container > .list > ul > li:not(:last-child)").css();，这个调用没有传入任何样式参数，完全是多余的，直接删掉就行。

修正后的完整代码 #

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="twitch">
    Twitch
  </div>
  <div class="list">
    <ul id="streamers">
    </ul>
  </div>
  <footer>
  </footer>
</div>

JavaScript #

$(document).ready(function() { 
  var api = "https://wind-bow.gomix.me/twitch-api"; 
  var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas" ]; 
  var newStreamers = [];
  
  // 循环时判断是否为最后一个元素，仅非最后一个<li>添加<hr>
  for (var i = 0; i < streamers.length; i++) { 
    var listItem = '<li>' + streamers[i];
    // 不是最后一项才加<hr>
    if (i !== streamers.length - 1) {
      listItem += '<hr>';
    }
    listItem += '</li>';
    newStreamers.push(listItem);
  } 
  
  $("#streamers").html(newStreamers.join("")); 
  
  // 统一设置<li>的样式
  $(".container > .list > ul > li").css({ 
    'margin-left': '50px', 
    'padding': '30px' 
  }); 
});

额外优化建议：用CSS替代<hr> #

其实用<hr>来做分隔线不够灵活，推荐用CSS的border-bottom来实现，这样不用生成<hr>标签，代码更简洁：

.container .list ul li {
  margin-left: 50px;
  padding: 30px;
  border-bottom: 1px solid #ccc; /* 模拟<hr>的分隔线 */
}

.container .list ul li:last-child {
  border-bottom: none; /* 最后一个<li>去掉分隔线 */
}

这样JS里只需要生成纯<li>元素就行，不用处理任何<hr>相关逻辑，维护起来更方便～

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