javascript - 在这种情况下，为什么 jQuery 找不到包含显示数学的 div

Question

我正在尝试构建一个 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已经成功下载，所以这不是原因:

但是，jQuery 并未发现包含数学的实际元素:

这是为什么呢？我希望包含数学的 div 至少能够打印到控制台。但为什么不打印出来呢？

附:

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

Answer 1

说明

这只是你正在使用 jQuery 的 $(selector).each()功能不正确。

来自文档:

Type: Function( Integer index, Element element )

而不是遵循原生 Array.prototype.forEach实现时，jQuery 的 .each 回调函数将 index 作为 第一个 参数，将 element 作为 第二个参数。

您需要做的很简单:

$(".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>