格式错误的HTML：如何在空li元素上显示子弹

Question

我有一些从Flash应用程序创建/输出的HTML，我需要在Firefox中显示/渲染它。

HTML格式很糟糕，所以它会吐出没有ul或ol元素的空li元素和列表，但它会吐出li元素。

如果li元素为空，是否有css标志或任何不显示li项目的方法（请参阅下面的空白代码示例）？

如果li元素没有innerText，那么它会显示项目符号。 但我不希望它这样做，如果li元素中没有innerText，我希望它不显示子弹。 有没有办法做到这一点，而无需解析HTML？

// example of badly formed HTML output from flash
<textformat leading="2">
    <li>
        <font style=" font-family: 'arial'; font-size: 14px; color: #FFFFFF; letter-spacing: 0px; ">
            <b>Influence and Negotiation</b>
            <font style=" font-size: 12px; color: #000000; ">
            </font>
        </font>
    </li>
</textformat>

// sometimes I get an empty li element, which in Firefox shows the bullet. I want to NOT show the bullet/li element if it is empty
<textformat leading="2">
    <li>
        <font style=" font-family: 'arial'; font-size: 14px; color: #FFFFFF; letter-spacing: 0px; ">
            <!-- empty li element -->
        </font>
    </li>
</textformat>

Answer 1

不，没有办法。 有:empty但是当它下面有一个<font>元素时它不起作用，并且没有:has在CSS中有。 你可以使用:has jQuery，但是因为你已经标记了javascript我认为它是一个选项：

$('li:has(font:empty)').remove();

那会有用吗？

Answer 2

如果要删除空li元素（其中“empty”表示无或仅包含空格内容），您可以执行以下操作：

function getText(el) {
  if (typeof el.textContent == 'string') {
    return el.textContent;
  }
  if (typeof el.innerText == 'string') {
    return el.innerText;
  }
}

var li, lis = document.getElementsByTagName('li');
var re = /^\s*$/;

for (var i=0, iLen=lis.length; i<iLen; i++) {
  li = lis[i];

  if (re.test(getText(li))) {
    li.parentNode.removeChild(li);
  }
}

或者，您可以将空LI设置为：

 list-style-type: none;

通过添加合适的类，但结果可能在浏览器中不一致。 有些人会留空空间，有些会将其移除。 您还可以使用以下类：

 display: none;

把李留在那里，但不显示它，没有空间。 由你决定。

Answer 3

$(document).ready(function(){
    $('li').each(function(){
      if($(this).html().length == 0)
          $(this).css('list-style-type','none')                        
   });

});

http://jsfiddle.net/yU8aJ/