Fatal编程技术网

JQuery中的MathJax

jquery

JQuery中的MathJax,jquery,mathjax,Jquery,Mathjax,我有许多不同的MathJax公式，它们将在网页上的不同列表中动态移动。我试图用JQuery和append属性来控制这一点 在我的脚本文件中，我有各种公式数组，然后是一个函数，它使用.append在指定div内的数组中列出公式。代码如下： function listArray(array,div){ for(var i=0; i<array.length; i++){ $('#'+div).append('<li>'+array[i]); } }; 函数列表数

我有许多不同的MathJax公式，它们将在网页上的不同列表中动态移动。我试图用JQuery和append属性来控制这一点

在我的脚本文件中，我有各种公式数组，然后是一个函数，它使用.append在指定div内的数组中列出公式。代码如下：

function listArray(array,div){
  for(var i=0; i<array.length; i++){
    $('#'+div).append('<li>'+array[i]); 
  }
};

函数列表数组（数组，div）{
对于（var i=0；i


有人知道一个很好的解决方法吗？我试过阅读一些关于重新排版MathJax的文档，但我并没有真正了解它。
我在更新/93、/94、/95你的小提琴时运行了一些测试，发现呈现的公式可以移动，但整个事情很脆弱。有时是简单的更改或只是一个页面参考resh将导致未描述的公式显示，每个公式都加倍，我无法解释

正如您将看到的，我原以为设置超时可以解决问题，但现在我认为情况并非如此

我认为这个bug只是在jsFiddle中运行代码的一个特性。当在本地以file://协议从我自己的计算机上运行代码并在Opera中查看时，我无法诱发这个bug

这是我的测试页面：


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test kineticJS lib - jsFiddle demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

<style type='text/css'>
    body {
    margin: 10px;
}
.jax {
    display: none;
}
#list1, #list2 {
    margin: 10px 0;
    padding: 5px;
    border: 1px solid #000;
}
</style>

<script type='text/javascript'>
$(window).load(function(){
function listArray($ul) {
    $(".jax").each(function(i, j){
        var li = $("<li/>").append($(j).text());
        $ul.append(li);
    });
};

//move formulas from original spans into list1
listArray($("#list1") );

//on click move formulas between list1 and list2
$("#moveUp").on('click', function() {
    $("#list2 li").eq(0).appendTo($("#list1"));
});
$("#moveDown").on('click', function() {
    $("#list1 li").eq(0).appendTo($("#list2"));
});

});
</script>


</head>
<body>
  <head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
    <span class="jax">\(\mathbb{Q}\)</span>
    <span class="jax">\(\mathbb{Z}\)</span>
    <ul id="list1"></ul>
    <button id="moveDown">Move Down</button>
    <button id="moveUp">Move Up</button>
    <ul id="list2"></ul>
</body>

</body>
</html>




测试kineticJS库-JSFIDLE演示
身体{
利润率：10px；
}
.jax{
显示：无；
}
#列表1，#列表2{
利润率：10px0；
填充物：5px；
边框：1px实心#000；
}
$（窗口）。加载（函数（）{
函数列表数组（$ul）{
$（“.jax”）。每个（函数（i，j）{
var li=$（“
  • ”）.append（$（j.text（））；
$ul.附加（li）；
});
};
//将公式从原始跨距移动到列表1中
列表数组（$（“#列表1”）；
//单击“在列表1和列表2之间移动公式”
$（“#向上移动”）。在（'单击'，函数（）上{
$（“#列表2 li”）.eq（0）.appendTo（$（“#列表1”）；
});
$（“#向下移动”）。在（'单击'，函数（）上{
$（“#列表1 li”）.eq（0）.appendTo（$（“#列表2”）；
});
});
\（\mathbb{Q}\）
\（\mathbb{Z}\）

      
下移
上移

        

        • 您的fiddle示例有两个问题。首先，数学表达式数组丢失反斜杠，因为它们在javascript字符串中用作转义字符。您需要将它们加倍：
        

        var jax = ['\\(\\mathbb{Q}\\)','\\(\\mathbb{Z}\\)'];

        
第二，将数学添加到页面后，需要告诉MathJax处理数学
        

        MathJax.Hub.Queue(["Typeset",MathJax.Hub,div]);

        
在附加数学之后，为了做到这一点
        

        《你的小提琴》显示了一个有效的版本。
        未来的注意：cdn.mathjax.org即将结束，请查看迁移技巧（也许还可以为未来的读者更新你的文章）。