格式錯誤的HTML：如何才能不顯示一個空的li元素

上一顆子彈我有一個是創建一些HTML /輸出從Flash應用程序&我需要顯示/呈現在Firefox瀏覽器。格式錯誤的HTML：如何才能不顯示一個空的li元素

的HTML格式錯誤，所以它會吐出空利元件&列表沒有UL或醇元素，但它會吐出裏元件。

是否有一個CSS標誌或任何方法來顯示li元素，如果li元素爲空（請參閱代碼空下面的代碼示例）？

如果鋰元素沒有的innerText，那麼就說明子彈。但是我不希望它這樣做，我希望它不會顯示子元素中是否存在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>

來源

2011-11-20 Jake M

如果你想刪除空li元素（其中「空」是指沒有或只有空白的內容），你可以這樣做：

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); 
    } 
}

或者，你可以設置空LIS到：

list-style-type: none;

通過添加適當的類，但結果卻可能是跨瀏覽器一致。有些會留下空的空間，有些會刪除它。您也可以使用以下類別：

display: none;

要離開li，但不顯示它並且沒有空格。隨你便。

來源

2011-11-21 00:08:40 RobG

不，沒有辦法。有:empty但如果有它下方的<font>元素不工作，並在CSS沒有:has。您可以使用:has使用jQuery，不過，既然你已經標記它javascript我以爲這是一個選項：

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

將這項工作？

來源

2011-11-20 23:42:45 Ryan

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

});

http://jsfiddle.net/yU8aJ/

來源

2011-11-21 00:34:31 tuze

格式錯誤的HTML：如何才能不顯示一個空的li元素

回答

相關問題