Question

有人可以帮我这个代码吗？我试图将某个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
}

Answer 1

列div是＆amp; b你先于div图像，这意味着他们不是父母的孩子。

如果在附加此

中的数字时更改了选择器

$(this).parent().$(".column_b").append(this);

为此，它会找到div并开始工作

$(".column_b").append(this);

还有一个问题是，在将数字元素附加到另一个div后，您将删除它。追加将elment从当前容器中移除并将其放入新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")

这是一个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++;
      });
   });
});

使用jquery重定位html元素

1 个答案: