Блог

Главная - Вопросы по программированию - Как удалить тег из мобильного загрузчика jQuery?

Как удалить тег из мобильного загрузчика jQuery?

#jquery #jquery-mobile

#jquery #jquery-mobile

Вопрос:

Я использую jQuery 1.4.5 на своей странице и использую загрузчик перед запросом ajax:

 $.mobile.loading('show', {theme:"e", text:"", textonly:false, textVisible: false});

После завершения запроса я скрываю его:

 $.mobile.loading('hide');

Это работает, но создает тег в конце страницы, где будет расположен текст.

 <div class="ui-loader ui-corner-all ui-body-e ui-loader-default">
 <span class="ui-icon-loading"></span>
 <h1></h1>
</div>

Несколько инструментов SEO теперь выдают предупреждение из-за этого второго тега h1.

Как я могу удалить тег из загрузчика?

Комментарии:

1. Вы пробовали remove() метод jQuery?

2. @PirateofMarmara Я не видел вашего комментария перед ответом, вы спросили, когда я был afk. Добро пожаловать.

3. нет, как это работает? вы имеете в виду .loading.remove() ?

4. @Arfeo, никаких проблем. Вы можете ответить после того, как он попробует, и это сработает.

5. @merlin, проверь это .

Ответ №1:

Вы можете удалить необходимый элемент с помощью метода jQuery remove .

 $('.ui-loader').find('h1').remove();

Комментарии:

1. Я спросил, пробовал ли он этот метод. Вам лучше подождать.

2. Эй, это сработало. Спасибо. Это рекомендуемый способ? Поиск чего-либо кажется дорогостоящим. К сожалению, textvisible = false, похоже, не влияет.

3. Что the textvisible=false does not seem to have an affect означает? @merlin

4. Ну, в моем вопросе команда show loading имеет атрибут «textvisible». Для него установлено значение false. Можно подумать, что это приведет к удалению самого тега h1.

5. Нет, согласно документам, это так не работает demos.jquerymobile.com/1.2.0/docs/api/methods.html . Как я вижу на странице примера, этот компонент не удаляется ui-loader после скрытия. Он использует переключение ui-loading атрибута html тега. Плохой инструмент. @merlin

Ответ №2:

Из документации jQuery:

Удалите набор сопоставленных элементов из DOM.

Подобно .empty(), метод .remove() удаляет элементы из DOM. Используйте .remove(), когда вы хотите удалить сам элемент, а также все, что внутри него. В дополнение к самим элементам удаляются все связанные события и данные jQuery, связанные с элементами. Чтобы удалить элементы без удаления данных и событий, вместо этого используйте .detach() .

 setTimeout(function(){
  $("h1").remove();
}, 3000);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>H1 Heading</h1>

Ответ №3:

Я всегда немного опаздываю на вечеринку, но если вам нужно настроить загрузчик JQM, пожалуйста, имейте в виду, что рядом с параметрами, описанными в вашем вопросе, вы можете указать также html параметр.

Прежде всего, вам нужно настроить свой пользовательский тег html без нежелательного h1 тега во время инициализации JQM:

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  $(document).on("mobileinit", function () {
    /* jQuery Mobile initialization */
    var html = "<div class='ui-loader'><span class='ui-icon-loading'></span></div>";
    $.mobile.loader.prototype.defaultHtml = html;
    // ... other settings as You need
    $.mobile.loader.prototype.options.text = "";
    $.mobile.loader.prototype.options.textVisible = false;
  });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

После этого вы можете показать loader как есть без какого-либо текстового сообщения или — когда вам все равно нужно показать загрузку message — вы можете настроить его дополнительно, всегда используя html опцию:

 var html = "<div class='ui-loader'><span class='ui-icon-loading'></span><h6>Wait...</h6></div>";
$.mobile.loading("option", "html", html);
$.mobile.loading("show");

Пожалуйста, обратите внимание:

Стандартная textVisible опция больше не будет работать таким образом, потому что по умолчанию JQM ищет h1 тег, который больше не существует внутри разметки загрузчика. Это должно быть исправлено в исходном коде JQM с помощью чего-то, что обеспечивает более гибкую конфигурацию, без жесткого кодирования h1 тега:

 1513                this.element.find( "h1" ).text( message );