Почему в этом случае jQuery не находит div с математикой отображения - PullRequest
Новая
       16

Почему в этом случае jQuery не находит div с математикой отображения

0 голосов
/ 20 марта 2019

Я пытаюсь создать минимальный рабочий пример 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 downloaded successfully.

Однако jQuery не обнаруживает фактические элементы, содержащие математику: enter image description here

Почему это так?Я ожидаю, что div, содержащий математику, будет напечатан по крайней мере на консоли.Почему же он не печатается beign?

PS

Я пока не использую функцию автоматического рендеринга, предоставляемую аддоном.Я хочу, чтобы это работало на самом базовом уровне, прежде чем я усложню ситуацию.

1 Ответ

1 голос
/ 20 марта 2019

Объяснение

Просто вы неправильно используете функцию jQuery $(selector).each().

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

Тип: Функция(Целочисленный индекс, элемент Element)

Вместо того, чтобы следовать нативной реализации Array.prototype.forEach, функция обратного вызова .each jQuery будет иметь index как первый аргумент и элемент как второй аргумент.

Вам нужно просто: 

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