jQuery如何隐藏包含span字段名的空内容列表项（li）？

我懂你的问题啦！你现在的麻烦是li里带着字段名的span标签，导致哪怕属性值是空的，整个li的文本长度也不为0，原来的脚本根本判断不出来。别急，给你几个实用的解决方案：

首先先假设你的HTML结构大概是这样的（应该和你的实际情况匹配）：

<ul>
  <li><span>Product Name:</span> Super Widget</li>
  <li><span>Barcode:</span></li>
  <li><span>Notes:</span></li>
  <li><span>Price:</span> $29.99</li>
</ul>

方案一：过滤掉span标签，检查剩余文本 #

这个方法最通用，直接获取li里除了字段名span之外的所有文本，去除空格后判断是否为空：

$('ul li').each(function() {
  // 获取li中除span外的所有文本，去除首尾空格
  const valueContent = $(this).contents().not('span').text().trim();
  // 如果剩余文本为空，就隐藏当前li
  if (valueContent.length === 0) {
    $(this).hide();
  }
});

方案二：给属性值单独加容器（更可靠） #

如果可以修改HTML结构，给属性值单独加个class容器，比如<span class="property-value">，那判断起来会更精准：
修改后的HTML：

<ul>
  <li><span>Product Name:</span> <span class="property-value">Super Widget</span></li>
  <li><span>Barcode:</span> <span class="property-value"></span></li>
  <li><span>Notes:</span> <span class="property-value"></span></li>
</ul>

对应的jQuery代码：

$('ul li').each(function() {
  if ($(this).find('.property-value').text().trim().length === 0) {
    $(this).hide();
  }
});

方案三：用正则匹配去掉字段名 #

如果你的字段名都是「XXX:」这种格式，可以直接用正则把字段名部分去掉，再检查剩余内容：

$('ul li').each(function() {
  const fullText = $(this).text().trim();
  // 去掉开头的「字段名:」部分，剩下的就是属性值
  const propertyValue = fullText.replace(/^.*:\s*/, '').trim();
  if (propertyValue.length === 0) {
    $(this).hide();
  }
});

这几个方案都能帮你在保留span字段名的前提下，精准隐藏那些属性值为空的li元素，你可以根据自己的实际HTML结构选最适合的~

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