Question

我有四个div元素

    <div id="one" class="present" style="display: none;">1</div>
    <div id="two" class="present" style="display: none;">2</div>
    <div id="three" class="present" style="display: none;">3</div>
    <div id="four" class="present" style="display: none;">4</div>

在某些时候，如果它变成

    <div id="one" class="present" style="display: none;">1</div>
    <div id="two" class="present" style="display: none;"></div>//this value gets deleted
    <div id="three" class="present" style="display: none;">3</div>
    <div id="four" class="present" style="display: none;">4</div>

我希望它重新排列为

    <div id="one" class="present" style="display: none;">1</div>
    <div id="two" class="present" style="display: none;">3</div>//this moves up
    <div id="three" class="present" style="display: none;">4</div>//this moves up
    <div id="four" class="present" style="display: none;"></div>

只有这四个元素的类别“存在”所以我认为我可以通过迭代来做一些事情，但不知道如何得到我想要的结果

我试过了：

    $(".present").each(function(){

    if ($(this).is(":empty"))
    {
        var target =  $(this);
        $(".present").each(function(){
             $(this).not(":empty");
             target.html($(this).html());
        });
    }
});

但这似乎把最后一个div的html放在空白处，这不是我想要的。我希望他们能够推高。

ps：它不仅仅是一个可能被删除的值。中间的任何值都可以删除。即使多个值也可以被删除，这意味着，我只能在最后一个div中获得值，我理想地想要移动到第一个div

Answer 1

我在上一段代码中发现了一些问题。

我假设你原来的问题是你不希望你的div元素被重新排列，而只是你的每个div的html内容。

假设你有这个：

<div id="one" class="present">1</div>
<div id="two" class="present"></div>
<div id="three" class="present">3</div>
<div id="four" class="present"></div>
<div id="five" class="present">5</div>
<div id="six" class="present"></div>
<div id="seven" class="present"></div>
<div id="eight" class="present">8</div>
<div id="nine" class="present"></div>
<div id="ten" class="present"></div>

可能有一个较短的方法，但这似乎有用。

$(".present").each(function () {
    var $this = $(this);

    if ($this.is(":empty")) {
        var $nextItem = $this.nextAll().not(':empty').first();

        console.log($nextItem.html());

        if($nextItem.length){
            $this.html($nextItem.html());
            $nextItem.empty();
        }
    }
});

生成的HTML是：

<div id="one" class="present">1</div>
<div id="two" class="present">3</div>
<div id="three" class="present">5</div>
<div id="four" class="present">8</div>
<div id="five" class="present"></div>
<div id="six" class="present"></div>
<div id="seven" class="present"></div>
<div id="eight" class="present"></div>
<div id="nine" class="present"></div>
<div id="ten" class="present"></div>

DEMO - 使用下一个非空值

正如您在生成的HTML中看到的那样，div元素尚未重新排序，只是HTML内容已向上移动，填充空白，从而将空白留在底部。它适用于中间和末尾缺少的多个空值。

Answer 2

非常确定这会解决问题：

$(".present").each(function(){
  if ($(this).is(":empty")){
    $(this).append($(this).parent());
  }
});

append函数删除元素并将其附加到目标。通过将它附加到它已经存在的容器中，它应该从dom中移除并重新插入末端，这应该允许较低的物体自然向上移动。

如果要为效果设置动画，可以克隆对象而不是追加，然后定位它的第一个实例，将高度值设置为0，然后将其删除。

因此，为了在容器上维护正确的ID，你可以将每个标记替换为下一个对象的标记，但是那里有相当多的内容杂耍。我会建议这样的东西（你需要稍微改变你的id命名方案，以使它更容易设置。不确定这是否适合你的情况。）

var myObjects = $(".present");
$(myObjects).each(function(){
  if ($(this).is(":empty")){
    $(this).append($(this).parent());
  }
}).each(function(){
  $(this).attr('id', 'a' + ($(this).index() + 1) )
});

所以你的id会是a1，a2，a3等......这封信是因为你不能用一个数字开始一个id或一个类，但如果需要的话可以用更具描述性的东西替换。

根据您使用这些ID的方式，您可以完全摆脱它们并直接在任何使用ID的函数中检查对象的index（）。

所以，如果你正在做这样的事情：

$("#one").stuff();

..你可以改用：

$(".present:eq(0)").stuff();

当然，如果你在css中引用特定的ID，这可能也行不通。

Answer 3

你不能简单地这样做：

$(".present:empty").each(function(index,item) {
    $(this).remove();
    $("#parent").append(this);
});

将它们拉出来并将它们添加回列表的末尾。

这是一个fiddle来说明。

Answer 4

简单的解决方案......（或者可能是替代）
Live Demo

function check(id) {
    var ele = document.getElementById(id),
        parent = ele.parentNode,
        len = parent.children.length,
        child = null;

    for (var i = 0; i < len; i++) {
        child = parent.children[i];
        if (child.nodeType === 1 && child.innerHTML.length === 0) {
            parent.appendChild(child);
        }
    }
}

Answer 5

只需在最后一个非空的

之后插入所有空的

$('.present:empty').insertAfter('.present:not(:empty):last');

http://jsfiddle.net/4QYjW/

编辑：

我没有注意到你只是在移动文本 - 你可以这样做

var withText = $('.present:not(:empty)').clone();// get all with text
$('.present').text(''); // clear all the text
// loop through and add the number text
$.each(withText, function(i,v){
    $('.present').eq(i).text($(v).text()); 
});

http://jsfiddle.net/k42Ny/

重新排列Html元素

5 个答案: