jQuery обернуть элемент внутри <li>, а затем appendTo - PullRequest
Новая
       23

jQuery обернуть элемент внутри <li>, а затем appendTo

0 голосов
/ 27 февраля 2019

Я пытаюсь при переносе двух <a> элементов внутрь <li> затем переместить их в другой div.Теперь каждый раз при изменении размера окна добавляются два новых пустых <li>.Как это исправить? 

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

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

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

если в вашем .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, кроме тех, которые вы добавляете

0 голосов
/ 27 февраля 2019

Каждый раз, когда вы изменяете размер окна, вы создаете два новых 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>
...