Может ли кто-нибудь помочь мне с этим кодом? Я пытаюсь изменить фигуры в определенном div на два столбца (a и b) таким образом, что два столбца имеют одинаковую высоту. Я безумно пытаюсь найти проблему в своем коде и не нахожу ее. Это не работает по какой-то причине...
<body onload="rearrangeImages();">
<div class="images"><!-- more than one might exist, each with its own figures -->
<figure>
<figcaption>This is the figcaption of this figure. An image is missing for this test.</figcaption>
</figure>
<figure>
<figcaption>This is the figcaption of this figure.</figcaption>
</figure>
<figure>
<figcaption>Another one.</figcaption>
</figure>
</div>
<script>
function rearrangeImages() {
$('.images').each(function() {//should work for each .images independently
$(this).prepend('<div class="column_b"></div>');
$(this).prepend('<div class="column_a"></div>');
$(this).append('<div class="test_div"></div>');
$('figure', this).each(function() {
var height_a = $(this).parent().$(".column_a").height();
var height_b = $(this).parent().$(".column_b").height();
if (height_a > height_b) {
$(this).parent().$(".column_b").append(this);
} else {
$(this).parent().$(".column_a").append(this);
}
$(this).remove();
});
});
}
</script>
</body>
EDIT Я сам обнаружил, что должен использовать этот селектор для высоты a и b:
var height_a = $(this).parent().children(".column_a").height();
Это мой новый jquery:
function rearrangeImages() {
$('.images').each(function() {
$(this).prepend('<div class="test_div"></div>');
$(this).prepend('<div class="column_b"></div>');
$(this).prepend('<div class="column_a"></div>');
$('figure', this).each(function() {
var height_a = $(this).parent().children(".column_a").height();
var height_b = $(this).parent().children(".column_b").height();
if (height_a > height_b) {
$(this).parent().children(".column_b").append(this);
} else {
$(this).parent().children(".column_a").append(this);
}
});
});
}
Теперь я хочу расширить эту функцию. псевдокод:
if (this is the last figure in .images) {
//place last figure in test_div to measure its height;
if (height_a > height_b + height_of_last_image) {
$(this).parent().children(".column_b").append(this);
} else {
$(this).parent().append(this);
}
} else {
//do the normal stuff see higher
}
Столбец div a & b вы добавляете к изображениям div, что означает, что они являются childern этого div, а не родителями.
Если вы измените селекторы, добавив цифры из этого
$(this).parent().$(".column_b").append(this);
Для этого он найдет div и начнет работать
$(".column_b").append(this);
Еще одна проблема заключается в том, что вы удаляете элемент рисунка после добавления его в другой div. При добавлении удаляет из него текущий контейнер и помещает его в новый div, поэтому вам не нужно его удалять.
Редактировать Я добавил в блок if, чтобы проверить последнее изображение на основе вашего псевдокода. Для этого я создал счетчик, чтобы отслеживать, сколько раз мы повторяем цикл.
var counter = 1;
Ваш блок if внутри цикла цифр
if(counter == $(figures).length ){
Кроме того, я изменил цикл фигур, чтобы получить только данные детей из текущих изображений div.
var figures = $(this).children("figure");
$(figures).each(function() {
И вместо использования
$(this).parent().children(".column_a")
Вы можете использовать функцию jquery sibling() так
$(this).siblings(".column_a")
Здесь пример скрипки и ниже - это код.
$(function(){
$('.images').each(function() {
$(this).prepend('<div class="test_div"></div>');
$(this).prepend('<div class="column_b"></div>');
$(this).prepend('<div class="column_a"></div>');
var counter = 1;
var figures = $(this).children("figure");
$(figures).each(function() {
if(counter == $(figures).length ){
if (height_a > height_b + $(this).height())
{
$(this).siblings(".column_b").append(this);
}
else
{
$(this).parent().append(this);
}
}
else
{
var height_a = $(this).siblings(".column_a").height();
var height_b = $(this).siblings(".column_b").height();
if (height_a > height_b)
{
$(this).siblings(".column_b").append(this);
}
else
{
$(this).siblings(".column_a").append(this);
}
}
counter++;
});
});
});