Селектор jQuery для определения div по его размеру - PullRequest
Новая
       14

Селектор jQuery для определения div по его размеру

2 голосов
/ 21 марта 2010

У меня есть несколько вложенных DIV на странице. Я хочу добавить событие только для самого маленького DIV, размер которого превышает 100x100 пикселей. Я могу сделать это, используя условия в коде. Можно ли это сделать с помощью селектора? 

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

Если да, приведите пример.

Ответы [ 4 ]

2 голосов
/ 21 марта 2010

Вот еще один подход, специфичный для вашей проблемы, он не выполняется с помощью селектора, а просто использует 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, а затем привязывает щелчок к этому элементу div.

2 голосов
/ 21 марта 2010

Самое простое решение - программное.Никакие собственные селекторы 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>
1 голос
/ 21 марта 2010

Вы не можете сделать это с помощью селектора.

Вместо этого вам нужно будет использовать .each, чтобы пройтись по элементам и найти самый маленький.

0 голосов
/ 21 марта 2010

Вместо использования .each() вы можете использовать фильтр: 

 $('div').filter(function(d) {
   return $(d).width() <= 100 && d.height() <= 100;
 }).each(function() {
   // do other stuff to these small divs
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...