0

4 つの 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>

これらの4つの要素だけがクラス「存在」を持っているので、それを反復することで何かできると思いますが、探している結果を取得する方法がわかりません

私は試した：

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

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

しかし、これは最後のdivのhtmlを空白スペースに置いているようです。これは私が望むものではありません。押し上げてほしい。

ps: 削除される可能性のある値は 1 つだけではありません。中間の値はすべて削除できます。複数の値でも削除される可能性があります。つまり、最後の div にしか値を持たない可能性があり、理想的には最初の div に移動したいと考えています。

4

5 に答える 5

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 を参照している場合は、うまくいかないでしょう。

于 2013-07-11T20:31:38.597 に答える
1

単純にこれを行うことはできません:

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

それらを引き出して、リストの最後に追加し直してください。

ここに説明するためのフィドルがあります。

于 2013-07-11T20:35:50.567 に答える
0

簡単な解決策... (または代替案)
ライブデモ

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);
        }
    }
}
于 2013-07-11T20:38:00.167 に答える