元素沒有可見內容

Question

我有以下div與以下children。

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

這個div有三件事。 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> 

我的進度

我用.clone()複製DIV找到所有的腳本標記刪除它們。

我需要使用正則表達式來解析和刪除所有評論。

然後使用正則表達式和.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

這裏有一個客戶端JavaScript函數hasVisibleContent，檢查特定專區內的DOM節點爲一個地方的working Fiddledisplay風格不是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> 

這裏的JavaScript：

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是否有內任何事情，你可以做這樣的：

$("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（或跨度）。 例如：

<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