如何从 jQuery 移动加载器中删除 <h1> 标签？

Posted 2023-05-09

【中文标题】如何从 jQuery 移动加载器中删除 <h1> 标签？

【英文标题】：How to remove <h1> tag from jQuery mobile loader?

【发布时间】：2019-08-26 11:57:51

【问题描述】：

我在我的页面上使用 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>

由于第二个 h1 标签，一些 SEO 工具现在发出警告。

如何从加载器中删除标签？

【问题讨论】：

你试过jQuery的remove()方法吗？

@PirateofMarmara 在回答之前我还没有看到你的评论，你问我什么时候挂掉的。不客气。

不，它是如何工作的？你的意思是 .loading.remove() ？

@Arfeo，没问题。你可以在他尝试后回答，这很有效。

@merlin，检查this。

【参考方案1】：

您可以使用 jQuery remove 方法删除所需的元素。

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

【讨论】：

我问他是否尝试过这种方法。你最好等一下。

嘿，成功了。谢谢你。这是推荐的方式吗？找东西听起来很昂贵。不幸的是 textvisible=false 似乎没有影响。

the textvisible=false does not seem to have an affect 是什么意思？ @merlin

好吧，在我的问题中，显示加载命令有一个属性“textvisible”。它设置为假。 On 可能认为这会删除 h1 标签本身。

不，根据文档demos.jquerymobile.com/1.2.0/docs/api/methods.html，它不会那样工作。正如我在示例页面上看到的，此组件在隐藏后不会删除 ui-loader。它使用html 标签的ui-loading 属性的切换。可怜的工具。 @merlin

【参考方案2】：

来自 jQuery documentation:

从 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 参数。

首先，您需要在 JQM 初始化期间设置您的自定义 html，不带不需要的 h1 标签：

<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 );