보이는 내용이없는 요소

Question

나는 다음과 같은 div을 가지고 있으며, 다음과 같은 것을 가지고있다. children.

<div> 
    <img src="http://zferral.com"> 
    <!--zferral is an invisible image analytics tool--> 
    <script>Some Comment</script> 
</div> 

이 항목에는 3 가지가 있습니다. A script, image 및 comment.

나는이 div 안에 실제로 있는지 알고 있어야하며 부울을 반환합니다.

jquery에서 사용할 수 있도록해야 해당 자식이 보이지 않으면 해당 div를 숨길 수 있습니다.

이들은 모두 true (하단)을 반환해야합니다. 위 예제는 false을 반환해야합니다.

<div> 
    <img src="http://zferral.com"> 
    <!--zferral is an invisible image analytics tool--> 
    <script>Some Comment</script> 
    <p>Hello</p> 
</div> 

<div> 
    <img src="http://zferral.com"> 
    <!--zferral is an invisible image analytics tool--> 
    <script>Some Comment</script> 
    Hello 
</div> 

<div> 
    <img src="http://zferral.com"> 
    <!--zferral is an invisible image analytics tool--> 
    <script>Some Comment</script> 
    <img src="anything other than zferral"> 
</div> 

내 진행

나는 DIV 모든 스크립트 태그를 제거 찾을 복사 .clone()을 사용했다.

모든 주석을 구문 분석하고 제거하려면 regex를 사용해야합니다.

그런 다음 regex와 .find를 사용하여 링크에서 zferral로 이미지를 가져옵니다.

마지막으로 나는 <div></div> 문자열이 있어야하며 그것이 비어 있음을 확인할 수 있습니다.

저는 현재 정체 상태에 있으며 최선의 접근 방법인지 정확하게 모릅니다.

part.additional = function(){ 

    var test = $('.group[style="border: none;"]').clone().find('script').remove().end(); 


    ((jQuery('#content .group').length > 1 && jQuery('#content .group:nth-child(2)').find('*:visible').length !== 0)) ? jQuery('#content').clone(true).attr('id','additional').find('.group:first').remove().end().find('script').remove().end() : false ; 

    } 
    var a = jQuery('#content .group').length > 1; 
    var b = jQuery('#content').clone(true).attr('id','additional').find('.group:first').remove().end().find('script').remove().end().find('style').remove().end().find('[style="border: none;"]').removeAttr('style').end(); 
    var c = jQuery('#content').clone(true).attr('id','additional').find('.group:first').remove().end().find('script').remove().end().find('style').remove().end().find('[style="border: none;"]').removeAttr('style').end().html().replace(/\n|\r|(\s\s)/g,''); 
    var d = '<div class="group"></div>' == c; 
    var e = (!d) ? b : false; 

Answer 1

한 곳의 특정 사업부 내에서 DOM 노드를 검사 자바 스크립트 함수 hasVisibleContent 클라이언트 측의 working Fiddle입니다 display 스타일은 none이 아닙니다.여기

는 HTML입니다 :

<div id="does-not-have-visable-content"> 
    <img src="https://mbsy.co/embed/v2/img/?mbsy_username=USERNAME&mbsy_campaign_uid=000&mbsy_email=example@example.com&mbsy_revenue=0.00" style="border: none; display: none" alt="" /> 
    <script>var x = "hello world"</script> 
    <!-- hello world --> 
</div> 

<div id="has-visable-content"> 
    <img src="https://mbsy.co/embed/v2/img/?mbsy_username=USERNAME&mbsy_campaign_uid=000&mbsy_email=example@example.com&mbsy_revenue=0.00" style="border: none; display: none" alt="" /> 
    <script>var x = "hello world"</script> 
    <p>Visible Content</p> 
    <!-- hello world --> 
</div> 

여기에 자바 스크립트입니다 : 스크립트 태그 내에서 자바 스크립트 사업부에 보이는 내용을 삽입하는 경우

function hasVisibleContent (selector) { 
    var ancestor = document.querySelector(selector) 
    var descendents = ancestor.getElementsByTagName('*') 
    var hasVisableContent = false 
    var i, $e, d; 
    for (i = 0; i < descendents.length; ++i) { 
    $e = descendents[i] 
    var display = getComputedStyle($e).getPropertyValue('display') 
    if(display !== 'none') hasVisableContent = true 
//  console.log([$e.nodeType, $e.tagName, display]) 
    } 
    return hasVisableContent 
} 

var visibleContent 

visibleContent = hasVisibleContent('#does-not-have-visable-content') 
if (visibleContent === false) console.log('all good') 

visibleContent = hasVisibleContent('#has-visable-content') 
if (visibleContent === true) console.log('all good') 

Answer 2

당신이 뭘 하려는지 명확하지 않고, 당신이 사업부가 그 안에 무엇을 가지고 있는지 여부를 테스트하려는 경우, 당신은 이런 식으로 작업을 수행 할 수 있습니다 :

$("div").contents().length > 0 

보관할를 마음에 $ ("div") 여러 div 선택합니다. 이 작업을 안정 적으로 수행하려면 id 속성을 사용하여 다른 것을 구별 할 수있는 방법이 필요합니다.

Answer 3

이 작동합니다 (제공 당신이 라인은 내부 divs을 중단 해달라고)

$('div').clone().each(function(k){ 
    var $div = $(this); 
    $div.contents().each(function(){ 
     if(this.nodeType === 8 || this.outerHTML === '<img src="http://zferral.com">'){ 
      return true; 
     } 
     if(this.nodeType === 3 || $(this).css('display') !== 'none'){ 
      console.log('Visible ' + k); 
      return; 
     } 
    }); 
}); 

Answer 4

나의 이해는 zreferral 이미지와 스크립트에 비해 뭔가가있는 경우, 각 사업부에 대해 테스트 할 것입니다 (뭔가 명백한). 스크립트와 zreferral을 포함하는 div 안에 div (또는 span)를 추가 할 수 있습니다. 예를 들어 :

<div> 
    <img src="http://zferral.com"> 
    <!--zferral is an invisible image analytics tool--> 
    <script>Some Comment</script> 
    <p>Hello</p> 
    <div id="visibleContent1"> 
    </div> 
</div> 

<div> 
    <img src="http://zferral.com"> 
    <!--zferral is an invisible image analytics tool--> 
    <script>Some Comment</script> 
    <p>Hello</p> 
    <div id="visibleContent2"> 
    </div> 
</div> 

<div> 
    <img src="http://zferral.com"> 
    <!--zferral is an invisible image analytics tool--> 
    <script>Some Comment</script> 
    <div id="visibleContent3"> 
    <img src="anything other than zferral"> 
    </div> 
</div> 

그런 다음이처럼 부울을 얻을 수 있습니다 :

다음

$('#visibleContent1').html().length>1 //or 0 if you don't put a linebreak