php - 删除后的 jQuery/AJAX 在多列 div 中留下空白

Question

我有一个多列(两列 div)和一个从 MySQL 中检索一些信息的循环。 (用户名、时间、消息)。

+---------------------------+   +---------------------------+
|  StackOverflow User       |   | StackOverflow User2       |
|  11:31 AM            X    |   | 11:37 AM              X   |
|                           |   |                           |
| Stack Overflow is a       |   | Tags make it easy to find |
| question and answer site  |   | interesting questions.    |
| for professional and      |   | All questions are tagged  |
| enthusiast programmers.   |   | with their subject areas. |
| It's built and run by you |   | Each can have up to 5     |
| as part of the Stack      |   | tags, since a question    |
| Exchange network of Q&A   |   | might be related to       |
| sites.                    |   | several subjects.         |
|                           |   | Click any tag to see a    |
+---------------------------+   | list of questions with    |
                                | that tag, or go to the    |
+---------------------------+   | tag list to browse for    |   
| StackOverflow User2       |   | topics that interest you. |
| 11:56 AM             X    |   +---------------------------+
|                           |   
| This post is not to       |   +---------------------------+
| explain anything but just |   | Stackoverflow User9       |
| to show how the divs are  |   | 2 days ago            X   |
| are the current moment    |   |                           |
| and to describe their     |   | Whoever sees this post    |
| issue that I'm unable     |   | I appreciate for the help |
| to know what is causing   |   | And who ever looks for    |
| if it's jQuery type of    |   | help in the same subject  |
| mansory or the Ajax.      |   | I hope you find what you  |
+---------------------------+   | are looking for as it can |
                                | be tough to find something|
                                | that you're both needing  |
                                | help with.. sometimes:)   |
                                +---------------------------+

我目前的问题是，如果我点击 X 按钮删除帖子，它会按照我的设置完美删除它，但删除后它会留下盒子的高度而不是底部盒子(被删除的盒子下面的盒子)占据它的空间并移动到它的位置。问题如下:

点击左侧第一个帖子的删除按钮后。

                                +---------------------------+
                                | StackOverflow User2       |
                                | 11:37 AM              X   |
                                |                           |
                                | Tags make it easy to find |
                                | interesting questions.    |
                                | All questions are tagged  |
                                | with their subject areas. |
                                | Each can have up to 5     |
                                | tags, since a question    |
                                | might be related to       |
                                | several subjects.         |
                                | Click any tag to see a    |
                                | list of questions with    |
                                | that tag, or go to the    |
+---------------------------+   | tag list to browse for    |   
| StackOverflow User2       |   | topics that interest you. |
| 11:56 AM             X    |   +---------------------------+
|                           |   
| This post is not to       |   +---------------------------+
| explain anything but just |   | Stackoverflow User9       |
| to show how the divs are  |   | 2 days ago            X   |
| are the current moment    |   |                           |
| and to describe their     |   | Whoever sees this post    |
| issue that I'm unable     |   | I appreciate for the help |
| to know what is causing   |   | And who ever looks for    |
| if it's jQuery type of    |   | help in the same subject  |
| mansory or the Ajax.      |   | I hope you find what you  |
+---------------------------+   | are looking for as it can |
                                | be tough to find something|
                                | that you're both needing  |
                                | help with.. sometimes:)   |
                                +---------------------------+

保留删除元素的高度，而不是下面的第二个帖子上升并占据它的位置。我相信当前的问题与 jQuery 有关它如何检查元素高度和自动调整但我不确定是否删除了另一个正确，它正确上升。

这是我目前正在使用的代码。

jQuery 多列高度调整与它的 CSS> 左右列>

$(document).ready(function()
{
    var left_column_height = 0;
    var right_column_height = 0;
    var items = $('.item');

    for (var i = 0; i < items.length; i++)
    {
        if (left_column_height > right_column_height)
        {
            right_column_height+= items.eq(i).addClass('right').outerHeight(true);
        } else {
            left_column_height+= items.eq(i).outerHeight(true);
        }
    }
});

.wrap { width: 100% }
.wrap .item { width: 49%;float: left;clear: left; }
.wrap .item.right { float: right;clear: right; }

用于删除帖子的 Ajax/jQuery。

$(document).ready(function() 
{
    $('.postdelete').on("click",function() 
    {
        var iD = $(this).attr("id");
        var dataString = 'post_iD='+ iD;

        if(confirm("Sure you want to delete this update?"))
        {
            $.ajax(
            {
                type: "POST",
                url: "load_ajax/delete_message_ajax.php", // just passes a isset $_POST.
                data: dataString,
                cache: false,
                success: function(html)
                {

                    $("#stbody"+iD).slideUp()("slow",function(){ $("#stbody"+iD).remove().slideUp("slow"); } );
                }
            });
        }
        return false;
    });
});

Html Normal Div(可能不需要，所以我会做一些东西来展示它是怎样的)

<div class="wrap" id="php get id">
    <div class="item">
        <div class="box">
            <a>StackOverflow User</a>
            <a>11:31 AM</a>
            <a>MESSAGE</a>
        </div>
    </div>
</div>

据我所知，我只是“认为”这似乎更明显，即问题肯定来自 jQuery 多列列表或 AJAX 帖子。我知道那里有 Mansonry 和其他几个脚本，但我会选择更小的代码来完成同样的事情，而且我只会在这里使用它，所以我宁愿坚持使用一小段代码而不是移动到更大的代码并对服务器造成压力。

更新 2:经过测试，我认为问题出在 jQuery 中，因为它只读取 .right 而不是 .left，所以如果我也删除正确的，它只会删除空白区域.

Answer 1

首先: 不要使用 $('#id')，只对带有 $(this) 的事件使用 $('.class') 来确定元素的范围，(#id 使一些多项行动的问题)。

在 jquery 中创建一个循环:

var items = $('.item');
items.each(function({
   ...
}); // not for(...){} with .lenght....

但这对你来说不是一个好的解决方案......

为什么不使用 .height() 来设置列的高度？

HLeft = $('.column.left').height();
HRight = $('.column.right').height();

隐藏 block :

$('.postdelete').on("click",function() {

    par=$(this).parents('.item');
    dataString = par.serialize('input');

... ajax sucess ...

        par.slideUp("slow",function(){ 
            $(this).remove(); 
        });

Html(不要忘记序列化的输入)

<div class="column">
    <div class="item">
        <input type="hidden" name="post_id" value="myId" />
        <div class="box">
            <a>StackOverflow User</a>
            <a>11:31 AM</a>
            <a>MESSAGE</a>
        </div>
    </div>
</div>

对于样式删除:

clear:left;
clear:right;

使用这样的东西:

.column       { width:50%; height:auto; margin:0; padding:0;  }
.column.left  { float:left;}
.column.right { float:right;}
.item         { width:100%; height:auto; float:left; }

再见