jquery选择器,用于按其大小标识一个DIV

最简单的解决方案是程序化的。没有本地jquery选择器可以这样做,但是您可以自己编写。然后你可以写:

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

它创建四个选择器(此问题只需要其中两个选择器,其他选择器用于完整性):

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

源代码:

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

这里是针对您的问题的另一种方法,它不是通过选择器完成的,只是使用jquery来查找和绑定DIV。

var d;
$('div').filter(function() {
   var w = $(this).width(), h = $(this).height();
   return w >= 100 && h >= 100 && w * h > 10000;
}).each(function() {
   if(!d || $(this).width() * $(this).height() < d.width() * d.height()) 
     d = $(this);
});

//d is now the smallest div over 100x100, do what you want with it...
d.click(function() {
  alert("Size: " + $(this).width() + "x" + $(this).height());
});

这会过滤掉100x100或更小的分格(请注意,确实如此 不 匹配100x100,因为你说的更大,只需移除 && w * h > 10000 如果要包括100x100个匹配项)。接下来,它按区域查找最小的DIV,并将其分配给 d ,然后将单击绑定到该分区。

不能使用选择器来执行此操作。

相反,你需要使用 .each 循环遍历元素并找到最小的元素。

而不是使用 .each() 您可以使用过滤器:

 $('div').filter(function(d) {
   return $(d).width() <= 100 && d.height() <= 100;
 }).each(function() {
   // do other stuff to these small divs
 });