2011-11-20 2 views
5

플래시 응용 프로그램에서 생성/출력되는 일부 HTML이 있습니다. & Firefox에서 표시/렌더링해야합니다. 그것은 더 UL과 요소를 & 목록을 빈 리를 뱉어 또는 요소를 올 실시하지만이 요소를 뱉어 있도록 잘못된 형식의 HTML : 비어있는 li 요소에 글 머리 기호를 표시하지 않는 방법

html로

심하게 형성된다.

li 요소가 비어있는 경우 CSS 기호 또는 표시하지 않을 방법이 있습니까 (비어있는 코드 예의 의미는 아래를 참조하십시오)?

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> 

답변

2

(여기서 아무도 또는 공백 만 내용을 "빈"의미), 당신은 할 수 :

:

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; 

다음과 같은 클래스를 사용할 수도 있지만 표시하지 않고 공백이 없어야합니다. 그것은 당신에게 달려 있습니다.

3

아니요, 방법이 없습니다. :empty이 있지만 그 아래에 <font> 요소가 있고 CSS에 :has이없는 경우 작동하지 않습니다.

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

것이라고 작업 : 당신은 내가 그것이 옵션의 가정 jQuery를이하지만, 당신이 그것을 태그 한 이후로 :has를 사용할 수 있습니까? 당신이 빈 리 요소를 제거하려면

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

}); 

http://jsfiddle.net/yU8aJ/

관련 문제