Question

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

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

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

Answer 1

每次调整窗口大小时，都会创建两个新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>

Answer 2

如果您的.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，这就是用例

jQuery将元素包装在<li>中，然后附加到

2 个答案: