Допустим, у меня есть шесть элементов <div>
внутри контейнера <div>
. Каждый из этих шести элементов div является квадратом и имеет стиль CSS float: left
. По умолчанию, когда они достигают края контейнера <div>
, они заворачиваются.
Теперь мой вопрос: используя Javascript, можно ли определить, в каком элементе находится обертка?
Если они отображаются на странице как:
___ ___
| 1 | | 2 |
----- -----
___ ___
| 3 | | 4 |
----- -----
Я пытаюсь определить, что перенос происходит между вторым и третьим элементом. Если вам интересно, не сошел ли я с ума, причина, по которой я пытаюсь сделать это, заключается в том, что если щелкнуть одно из этих полей, я хочу иметь возможность раскрывать информационную область между строками с помощью какого-нибудь причудливого shmansy jQuery.
___ ___
| * | | ! |
----- -----
| Someinfo|
___ ___
| * | | * |
----- -----
Любые идеи по определению места разрыва?
P.S. Причина, по которой я плаваю и позволяю ему автоматически оборачиваться, заключается в том, чтобы сделать его отзывчивым. Прямо сейчас, если я изменяю размер браузера, он соответствующим образом оборачивает поля. Я не хочу жестко кодировать ширину столбцов.
[РЕДАКТИРОВАТЬ] Благодаря ответу, предоставленному Explosion Pills, я смог найти решение.
// Offset of first element
var first = $(".tool:first").offset().left;
var offset = 0;
var count = 0;
$(".box").each(function () {
// Get offset
offset = $(this).offset().left;
// If not first box and offset is equal to first box offset
if(count > 0 && offset == first)
{
// Show where break is
console.log("Breaks on element: " + count);
}
// Next box
count++;
});
Это выводит в консоли следующее:
Breaks on element: 7
Breaks on element: 14
Breaks on element: 21
Breaks on element: 28
Когда у меня было 30 ящиков, в итоге получилось 7 ящиков в ширину и 5 рядов (, в последнем ряду было только 2 ящика)