使用 jquery 重新定位 html 元素答案

【问题标题】：Relocating html elements with jquery使用 jquery 重新定位 html 元素
【发布时间】：2013-11-14 04:21:00
【问题描述】：

有人可以帮我处理这段代码吗？我正在尝试将某个 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
}

【问题讨论】：

标签： jquery height this

【解决方案1】：

列 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")

这是一个fiddle 示例，下面是代码。

$(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++;
      });
   });
});

【讨论】：

感谢您的回答。我了解到 append() 方法也将它从它的当前容器中删除。仅用于分配 height_a 和 height_b 我的推理是：'this'是数字，所以它的父级是 div.images 并且我在那里搜索 .column_a;只需声明 $('.column_a') 它会找到 every .column_a，我只想在此 div.images 中找到 column_a。原因是，我想要排列多个这样的 div.image，每个都有不同的图形。
我发现我应该使用 .children(".column_a")。现在请我在主要问题中进行编辑以回答我如何扩展该功能。
我用你的扩展伪代码更新了我的帖子。希望这就是您想要的。