元素没有可见内容

问题描述：

我有以下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;

你会如何处理的情况下，如果脚本标记中的JavaScript插入可见的内容到DIV？ – 2012-07-09 23:18:06

为什么'img'或'script' * not *会成为内容？你基于什么标准？ – 2012-07-09 23:22:59

@SaniHuttunen伟大的观点，这就是我想弄明白！ – ThomasReggi 2012-07-09 23:45:46

答

这里有一个客户端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&[email protected]&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&[email protected]&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')

答

目前还不清楚是什么你正在尝试做的，但如果你想测试一个div是否有内任何事情，你可以做这样的：

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

保持记住$（“div”）选择多个div。如果你希望这可靠地工作，你需要一些方法来区分一个人，也许通过使用ID属性。

答

这应该工作（前提是你没有换行内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; 
     } 
    }); 
});

答

我的理解是，你要测试的每个格，如果有别的东西比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

元素没有可见内容

相关推荐