jquery - jQuery remove() イベントを元に戻す方法

Question

私はこのコードを持っています:

$(window).resize(function() {
        if($(window).height() < 768) {
            $('div#navigation ul li br').remove()
        } else {
}
    })

他に削除イベントを元に戻すことは可能ですか?
アクションの前と同じ場所にこれらのタグを配置する必要があります。

Answer 1

$(window).resize(function() {
  $('div#navigation ul li br').toggle( $(this).height() >= 768 );
});

.toggle()選択した要素を非表示 (jQuery は CSS を使用display: none;) にするか表示するかを定義するブール値パラメーターを取ります。

この場合、ブール値の計算にウィンドウの高さが使用されます。

---

時期尚早の最適化: 何らかの理由で上記の動作が遅い場合は、事前にブレークを選択し、状態を記憶して最初にやるべきことがあるかどうかを判断することで、最適化できます。

$(window).resize( (function () {
  var $window = $(window),
      $navigationBreaks = $('div#navigation ul li br'),
      prevState = isLargeWindow();

  function isLargeWindow() {
    return $window.height() >= 768;
  }

  return function () {
    var newState = isLargeWindow();

    if (newState == prevState) return;

    $navigationBreaks.toggle(newState);
    prevState = newState;
  };
})() );

これは、ワンライナー アプローチよりもはるかに多くのコードであり、はるかに複雑であり、数ミリ秒速くなる可能性があります。一粒の塩でそれを取ります。

Answer 2

これを行う最善の方法は、toggle(またはhideand show) とnot removeを使用することです。

$(window).resize(function() {
    if($(window).height() < 768) {
        $('div#navigation ul li br').toggle();
    } else {
        $('div#navigation ul li br').toggle();
    }
});

Answer 3

jQuery (または一般的には JavaScript) で DOM 要素を「再接続」する単一の方法はありません。代わりに、通常の追加メソッドを使用して後で添付する新しい要素を作成するか、.removed / .detached 要素を保存してから後で追加する必要があります。

$br = $('div#navigation ul li br').remove();
//...
$('div#navigation ul li').append($br);

ただし、 、 、 などしか.appendでき.prependませ.wrapん。何らかのプレースホルダーがないか、前後に挿入する子要素がわかっている場合を除き、他の子要素の間にある場合は、前の場所に戻すことはできません。

要素を削除する唯一の理由が要素を非表示にすることである場合は、さまざまな show/hide メソッドを使用して、要素を DOM から削除せずに視覚的に非表示にすることができます。