Question

我有一些从Flash应用程序创建/输出的html＆amp;我需要在firefox中显示/渲染它。

HTML格式错误，因此它会吐出空的 li 元素＆amp;没有 ul或ol 元素的列表但它会吐出 li 元素。

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

如果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>元素并且CSS中没有:has时，这不起作用。你可以使用: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;

将li留在那里但不显示它并且没有空间。这取决于你。

Answer 3

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

});

http://jsfiddle.net/yU8aJ/

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

3 个答案: