Home/ Questions/Q 687755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T02:09:35+00:00

I have few nested DIVs at page. I want to add event only for

  • 0

I have few nested DIVs at page. I want to add event only for smalest DIV which size is more than 100×100 px.
I am able to do it using conditions in code.
Is it possible to do using selector?

$('?????').click(function (e) {
    }

If yes, please provide an example.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The simplest solution is programmatic. No native jQuery selectors will do this however you can write your own. You can then write:

    $("div:larger(100x100):smallest")...

    It creates four selectors (only two of which are needed for this problem, the others are for completeness):

    • :larger(HxW)
    • :smaller(HxW)
    • :largest
    • :smallest

    Source code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("div:larger(100x100):smallest").css("border", "1px solid black");
});

$.extend($.expr[":"], {
  smaller: function(elem, i, match) {
    var m = /^(\d+)(?:x(\d+))$/.exec(match[3]);
    if (!m) {
      return false;
    }
    var h = m[1];
    var w = m[2] || h;
    var t = $(elem);
    return t.height() <= h && t.width() <= w;
  },
  larger: function(elem, i, match) {
    var m = /^(\d+)(?:x(\d+))$/.exec(match[3]);
    if (!m) {
      return false;
    }
    var h = m[1];
    var w = m[2] || h;
    var t = $(elem);
    return t.height() >= h && t.width() >= w;
  },
  smallest: function(elem, i, match, set) {
    var areas = $.map(set, function(elem, index) {
      return $(elem).height() * $(elem).width();
    });
    for (var j=0; j<areas.length; j++) {
      console.log("" + j + ": " + areas[i] + " / " + areas[j]);
      if (areas[j] < areas[i]) {
        return false;
      }
    }
    return true;
  },
  largest: function(elem, i, match, set) {
    var areas = $.map(set, function(elem, index) {
      return $(elem).height() * $(elem).width();
    });
    for (var j=0; j<areas.length; j++) {
      if (areas[j] > areas[i]) {
        return false;
      }
    }
    return true;
  }
});
</script>
<style type="text/css">
div { background: yellow; margin: 15px; }
#one { height: 50px; width: 50px; }
#two { height: 100px; width: 100px; }
#three { height: 150px; width: 150px; }
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
    • 0