jquery - jQuery如何反转remove()事件

Question

我有这个代码：

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

是否可以在 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(or hideand show) 而不是 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等。如果它在其他子元素之间，则不能将其插入到之前的位置，除非您有某种占位符，或者您知道要在之前/之后插入的子元素。

如果您删除元素的唯一原因是隐藏它，那么您可以使用各种显示/隐藏方法使其在视觉上消失，而无需将其从 DOM 中删除。