如何用jQuery为指定列表项添加基于文本内容的ID（含特殊字符处理）

嘿，你的思路已经很对啦！不过有两个小细节可以优化，让代码更符合需求也更规范：一是现在的代码没有跳过第一个带按钮的LI，二是替换特殊字符时可能会产生连续的连字符（比如Import & distribution会变成Import---distribution）。我来帮你调整一下：

最终可用的完整代码 #

你的HTML结构保持不变

<div id="services"> 
  <div class="box"> 
    <ul> 
      <li><button type="button">CLOSE</button></li> 
      <li>Irrigation</li> 
      <li>Transport</li> 
      <li>Construction</li> 
      <li>Import & distribution</li> 
      <li>Iwi</li> 
      <li>Tourism</li> 
      <li>Logistics</li> 
      <li>Education</li> 
    </ul> 
  </div> 
</div>

修正后的jQuery代码

jQuery(document).ready(function($) {
  // 直接筛选出除第一个之外的所有目标LI
  $("#services .box li:not(:first)").each(function() {
    // 获取LI文本并去除首尾空格，避免ID首尾出现连字符
    var rawText = $(this).text().trim();
    
    // 1. 把所有非字母数字的字符替换成连字符
    // 2. 把连续的多个连字符合并成单个，让ID更干净
    var cleanId = rawText.replace(/[^a-zA-Z0-9]/g, '-').replace(/-+/g, '-');
    
    // 兜底：HTML规范要求ID不能以数字开头，如果出现这种情况就加前缀
    if (/^\d/.test(cleanId)) {
      cleanId = 'service-item-' + cleanId;
    }
    
    // 给当前LI设置ID
    $(this).attr('id', cleanId);
  });
});

关键优化点解释 #

• li:not(:first)选择器：一步到位跳过第一个LI，比手动判断index更简洁直观，也不容易出错。
• .trim()处理文本：避免LI文本前后的空格被转成连字符，导致ID开头或结尾带-。
• 双重正则替换：解决了特殊字符（比如&）和空格混合产生连续连字符的问题，生成的ID更规范。
• ID合法性校验：HTML标准里ID不能以数字、符号开头，这里加了个小判断，万一你的LI文本以数字开头，会自动加上service-item-前缀，避免出现不符合规范的ID。

运行后的效果 #

你的LI最终会变成这样（省略了第一个带按钮的LI）：

<li id="Irrigation">Irrigation</li>
<li id="Transport">Transport</li>
<li id="Construction">Construction</li>
<li id="Import-distribution">Import & distribution</li>
<li id="Iwi">Iwi</li>
<li id="Tourism">Tourism</li>
<li id="Logistics">Logistics</li>
<li id="Education">Education</li>

现在你就可以直接用这些ID写CSS样式啦，比如#Import-distribution { color: #2c3e50; }这样定位特定LI～

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