Question

我在页面上有几个嵌套的DIV。我想仅为尺寸超过100x100像素的最小DIV添加事件。我可以使用代码中的条件来完成它。是否可以使用选择器？

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

如果是，请提供一个例子。

Answer 1

最简单的解决方案是程序化的。没有本机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>

Answer 2

这是针对您的问题的另一种方法，它不是通过选择器完成的，只是使用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或更小的div（请注意，不匹配100x100，因为您说的更大，如果您想要包含100x100匹配，只需删除&& w * h > 10000）。接下来，它按区域查找最小的div，将其分配给d，然后将点击绑定到该div。

Answer 3

您无法使用选择器执行此操作。

相反，您需要使用.each遍历元素并找到最小的元素。

Answer 4

您可以使用过滤器代替使用.each()：

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

jQuery选择器用于根据其大小标识div

4 个答案: