0

I have the following div with the following children.

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

There are 3 things in this div. A script, an image, and a comment.

I need to know if their is something really inside this div and return a Boolean.

I need this to be available to jquery so I can hide the div if their is no visible children.

These should all return true (bottom). The top example should return 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>

My Progress

I was using .clone() to copy the div find all the script tags remove them.

I need to use regex to parse and remove all the comments.

Then use regex and .find to get images with zferral in the link.

Finally I should have a string <div></div> and can confirm that it is empty.

I'm at a standstill and I don't exactly know if this is even the best approach.

  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;
4

4 回答 4

1

It is not clear what you are trying to do but if you are trying to test whether a div has anything within it, you may be able to do it like this:

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

Keep in mind that $("div") selects multiple divs. If you want this to work reliably, you need some way to distinguish one from the others, maybe by using id attributes.

于 2012-07-09T23:19:24.767 回答
0

This should work (provided you dont have line breaks inside 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;
        }
    });
});
于 2012-07-10T00:07:56.563 回答
0

My understanding is that you want to test for each div, if there is something else than the zreferral image and the script (something visible). You could add a div (or a span) inside the div containing the script and zreferral. For example:

<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>

Then you can get your boolean like this:

$('#visibleContent1').html().length>1 //or 0 if you don't put a linebreak
于 2012-07-10T00:13:16.340 回答
0

Here's a working Fiddle of a client-side javascript function hasVisibleContent that checks the DOM nodes within a specific div for one where the display style is not none.

Here's the 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>

Here's the 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')
于 2016-04-08T00:57:08.810 回答