Перемещение html-элементов с помощью jquery

0

Может ли кто-нибудь помочь мне с этим кодом? Я пытаюсь изменить фигуры в определенном 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
}
Теги:
this
height

1 ответ

0
Лучший ответ

Столбец 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++;
      });
   });
});
  • 0
    Спасибо за этот ответ. Я узнал, что метод append () также удаляет его из текущего контейнера. Только для присвоения height_a и height_b я рассуждал так: «this» - это фигура, поэтому ее родитель - div.images, и там я ищу .column_a; когда вы просто объявляете $ ('. column_a'), он находит каждый .column_a, где я хочу найти только column_a в этом div.images. Причина в том, что я хочу, чтобы было организовано более одного такого изображения, каждый с разными фигурами.
  • 0
    Я обнаружил, что должен использовать .children (". Column_a"). Теперь, пожалуйста, внесите изменения в основной вопрос, чтобы ответить, как я могу расширить эту функцию.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню