0

我正在尝试构建一个 KaTeX 在网页上呈现一堆数学的最小工作示例。为此，我整理了以下 HTML 文件：

$(".inline-math").each(
  function(element) {
    console.log("Rivimatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML, element);
  }
);

$(".display-math").each(
  function(element) {
    console.log("Näyttömatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML, element);
  }
);
<p>Tässä on näyttömuotoinen yhtälö:</p>
<div class="display-math">
  F(b) - F(a) = \int_a^b f(x) \,\mathrm d x
</div>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

数学没有被渲染，但 KaTeX 已成功下载，所以这不是原因：

KaTeX 下载成功。

然而，jQuery 并没有发现包含数学的实际元素： 在此处输入图像描述

为什么是这样？我希望div至少将包含数学的内容打印到控制台。但是，为什么不打印呢？

附言

我还没有使用插件提供的自动渲染功能。在我让事情变得更复杂之前，我想让这个工作在一个非常基本的层面上发挥作用。

4

1 回答 1

1

解释

只是你$(selector).each()错误地使用了 jQuery 的功能。

从文档中：

类型：函数（整数索引，元素元素）

Array.prototype.forEachjQuery 的回调函数不遵循本机实现，而是.each将索引作为第一个参数，将元素作为第二个参数。

您需要做的只是：

$(".display-math").each(
  function(i, element) {
    // ----^ -^
    console.log("Näyttömatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML,element);
  }
);

或者，您可以只使用VanillaJS：

document.querySelectorAll('.display-math').forEach(function(element){
    console.log("Näyttömatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML,element);
});

工作代码

$(".inline-math").each(
  function(i, element) {
    console.log("Rivimatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML, element);
  }
);

$(".display-math").each(
  function(i, element) {
    console.log("Näyttömatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML, element);
  }
);
<p>Tässä on näyttömuotoinen yhtälö:</p>
<div class="display-math">
  F(b) - F(a) = \int_a^b f(x) \,\mathrm d x
</div>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

于 2019-03-20T09:52:47.253 回答