Question

我有以下div以下children。

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

这个div中有3件事。一个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找到所有脚本标签删除它们。

我需要使用正则表达式来解析并删除所有注释。

然后使用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

目前尚不清楚你想要做什么，但如果你想测试一个div是否有任何内容，你可能会这样做：

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

请记住$（“div”）选择多个div。如果您希望它可靠地工作，您需要一些方法来区分其他方法，可能使用id属性。

Answer 2

这应该有用（前提是你没有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 3

我的理解是你要测试每个div，如果除了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

Answer 4

这是客户端javascript函数hasVisibleContent的{{3}}，它检查特定div中的DOM节点，其中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>

这是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')

没有可见内容的元素

4 个答案: