javascript - Jquery 用每个修改 html

Question

我对 jQuery 有疑问。我想编写一个函数来动态替换我的 HTML 中的某些内容。

这是函数:

function renderPage(datas, html) {
    $(html).find("*").each(function(){
       if ($(this).attr("data-func")) {
           var df = $(this).attr("data-func");
           var content = null;
           eval("content = " + df + "($(this),datas);");
           console.log(content);
       }
    });
}

问题是，它没有效果!我在日志中看到内容变量是正确的，但输出没有什么不同。

我在 eval 中的函数:

function fill(element,data) {
    element.html("BASSZA MEG");
    var events = data.events;

    var i = 0;
    var n = events.length;

    for (;i<n; i++) {
        obj = events[i];
        var tr = $("<tr>");
        var nev = $("<td>");
        var link = $("<a href='programbelso.html#id="+obj["event_id"]+"&logo="+obj["event_logo"]+"'>");
        link.html(obj["event_name"]);
        nev.append(link);
        tr.append(nev);
        element.append(tr);
    }

    console.log("element: " + element);
    return element;
}

Answer 1

首先，不要遍历文档中的每个元素，然后使用 if() 语句。您可以通过使用正确的选择器显着提高性能。

下面的示例无需使用邪恶的 eval() 函数也能实现您想要做的事情:

function renderPage(datas, html) {
    $('[data-func]').each(function() {
       var df = $(this).attr("data-func");
       var the_func = window[$(this).attr("data-func")]; 

       if(typeof the_func === 'function') {
           var content = the_func($(this), datas);
           console.log(content);
       }
    });
}