为什么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/[email protected]/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/[email protected]/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/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

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

但是，jQuery没有发现包含数学的实际元素：

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

P.S.

我还没有使用插件提供的自动渲染功能。我想让这个工作在一个非常基础的层面上，然后再让事情复杂化。

Answer 1

Explanation

它只是你正在使用jQuery的$(selector).each()函数错误。

从文档：

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

而不是遵循原生的Array.prototype.forEach实现，jQuery的.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);
});

Working Code

$(".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/[email protected]/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/[email protected]/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/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>