jQuery 将元素包装在 <li> 中，然后 appendTo答案

【问题标题】：jQuery wrap element inside a <li> and then appendTojQuery 将元素包装在 <li> 中，然后 appendTo
【发布时间】：2019-02-27 13:10:37
【问题描述】：

我正在尝试将两个<a> 元素包装在<li> 中，然后将它们移动到另一个div。现在每次调整窗口大小时，都会添加两个新的空<li>。如何解决？

$(document).ready(appendBtns);
$(window).resize(appendBtns);

function appendBtns() {
    if($(window).innerWidth() < 768) {
       $('.btn').wrap('<li>').parent().appendTo('.main-nav ul')
    }
}

【问题讨论】：

在某处设置一个标志以表明您已经包装并添加了它们......？（在元素上存储一些 .data()，在 html/body 上设置一个类来保存这些信息，...）
或者确保这两个链接始终存在（如果需要，复制，如果您在桌面上的其他地方需要它们） - 并让 CSS 媒体查询处理 显示/隐藏 i> 任何合适的。

标签： javascript jquery css dom resize

【解决方案1】：

如果您的 .main-nav ul 中没有其他 li 元素，请在添加之前将其清空，如下所示：

$(document).ready(appendBtns);
$(window).resize(appendBtns);

function appendBtns() {
    if($(window).innerWidth() < 768) {
       $('.main-nav ul').html(''); //add this line
       $('.btn').wrap('<li>').parent().appendTo('.main-nav ul')
    }
}

注意：如果您的 UL 除了您要附加的 li 之外没有其他 li，则这是用例

【讨论】：

【解决方案2】：

每次调整窗口大小时，都会创建两个新的 li。我会将您的代码更改为，以便检查按钮是否已被移动：

$(document).ready(appendBtns);
$(window).resize(appendBtns);

var $navUl = $('.main-nav ul'); // do your selector here and cache in var for better performance
var $buttons = $('.btn');

function appendBtns() {
  if ($(window).innerWidth() < 768 && !$buttons.closest('.main-nav').length) { // check to see if buttons have already been moved

    $navUl.append($buttons.wrap('<li></li>').parent())
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="main-nav">
  <ul></ul>
</nav>
<a href="#" class="btn">test</a>
<a href="#" class="btn">test 1</a>

【讨论】：