CODEWITHSUNDEEP
javascriptjquery
Concrete-Cowboy
Concrete-Cowboy

Reputation: 87

Getting the height of all div id's on a page

I am trying to find a way to send myself an alert if any div is larger than a preset size before sending to the printer.

Each page will be different and have different div ids for sample test questions.

Also, the height of each div will not be pre-set as it is here. Currently, I have this, but it is not working as I would hope:

<style>
#one{background:#ddd;height:250px;}
#two{background:#000;height:300px;}
</style>
<div id="page">
  <div id="one">
    stuff
  </div>
  <div id="two">
    more stuff
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  var IDs = $("#page div[id]")         
  .map(function() { return this.id; })
  var result = $(this.id).height();
  if(result > 275){
    alert("over");
  }else{
    alert("under");
  }
</script>

I do feel I am close. Any help is greatly appreciated.

Upvotes: 0

Views: 40

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074495

You don't need ids for this, but if you want to limit your search to divs with ids, you've done that correctly. The problem is afteward when you try to use the results.

You want to loop through the set of matching elements. jQuery provides each to do that:

$("#page div[id]").each(function() {
    // This is called once for each matching div;
    // `this` refers to each of the divs. So:
    if ($(this).height() > 275) {
        alert(this.id " is over");
    } else {
        alert(this.id + " is under");
    }
});

Upvotes: 1

Related Questions