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>

编辑 我发现我自己应该使用这个选择器来选择高度 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
}
4

1 回答 1

0

列 div 的 a 和 b 您要添加到 div 图像，这意味着它们是该 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的兄弟（）函数

$(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++;
      });
   });
});
于 2013-11-13T15:14:59.927 回答