Удалить и добавить видовой экран, используя jQuery

Question

Я наткнулся на страницу HTML, имеющую следующий фрагмент кода:

jQuery(document).ready(function () {
    var screen_width = parseInt(jQuery(window).innerWidth());
    var scale = screen_width / 1200;
    $('head').remove('<meta name="viewport">');
    $('head').append('<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=' + scale.toFixed(1) + ',minimum-scale=0.1,user-scalable=yes"/>');
});

При проверке веб-страницы в консоли отображается следующая ошибка:

jquery. js: 13 Uncaught Error: синтаксическая ошибка, нераспознанное выражение: <meta name="viewport"> в Function.ga.error (jquery. js: 13) на ga.tokenize (jquery. js: 16) в ga.compile (jquery. js: 20) в ga.select (jquery. js: 20) в га (jquery. js: 10) в Function.ga.matchesSelector (jquery. js: 13) в Function.r.filter (jquery. js: 20) в Ка (jquery. js: 34) в r.fn.init.remove (jquery. js: 35) на HTMLDocument. (Обзор: 1878)

Ошибка исчезла, если закомментировать $('head').remove('<meta name="viewport">');. Это правильный способ удаления области просмотра?

Answer 1

Это вызвало ошибку из-за неправильной реализации функции удаления. Когда вы хотите удалить сам элемент, а также все внутри него. В дополнение к самим элементам удаляются все связанные события и данные jQuery, связанные с элементами.

Когда вы указываете элемент для .remove (), обязательно используйте селекторы, которые являются именами элементов, id, классами и т. Д. c.

Код должен быть таким:

jQuery(document).ready(function () {
   var screen_width = parseInt(jQuery(window).innerWidth());
   var scale = screen_width / 1200;
   $('meta[name="viewport"]').remove();
   $('head').append('<meta name="viewport" content="target-densitydpi=device dpi,width=device-width,initial-scale=' + scale.toFixed(1) + ',minimum-scale=0.1,user-scalable=yes"/>');
});

Или намного лучшая реализация:

jQuery(document).ready(function () {
   var screen_width = parseInt(jQuery(window).innerWidth());
   var scale = screen_width / 1200;
   $('meta[name="viewport"]').attr('content', "target-densitydpi=device dpi,width=device-width,initial-scale=' + scale.toFixed(1) + ',minimum-scale=0.1,user-scalable=yes'/>");
});

Answer 2

Есть несколько способов сделать это:

Опция 1:

$('head meta[name="viewport"]').remove();

Опция 2:

$('head').find('meta[name="viewport"]').remove();

Опция 3:

$('head meta[name="viewport"]').prop('outerHTML', '<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=' + scale.toFixed(1) + ',minimum-scale=0.1,user-scalable=yes"/>');

Примечание. При использовании опции 3 вам не нужно удалять этот элемент.

Answer 3

Вы не выбираете правильный элемент следующим образом:

$('head').remove('<meta name="viewport">');

должно быть таким:

$('meta[name="viewport"]').remove();

или вы можете добавить идентификаторы к своим элементам, чтобы легко их распознать.

Answer 4

Вы можете использовать атрибут и селектор значения для удаления элемента:

$('meta[name="viewport"]').remove();