search

Home  >  Q&A  >  body text

javascript How to dynamically generate the code in the JS file (script tag) based on the dynamically generated string

My code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<p class="name name0">
    <p>test</p>
</p>
<p class="name name1">
    <p>test2</p>
</p>

<script>
    function func1(className) {
        return `$('${className}').find('p').text()`
    }
    
    for(var i=0;i<$('.name').length;i++){
        console.log(`name${i} p:`,func1(`.name${i}`));
    }
    //第一次循环生成语句： $('.name0').find('p').text();
    //第二次循环生成语句： $('.name1').find('p').text();
</script>
</body>
</html>

I don’t want to get the value of each P, just as an analogy. I want to know how to dynamically render the code inside <script> through the return value of func1()? Or how to dynamically render js files

I want this file of the current code to dynamically generate js code based on .name p, such as
When there are two .name p

<p class="name name0">
    <p>test</p>
</p>
<p class="name name1">
    <p>test2</p>
</p>

Then the final code in <script> should be 

<script>
    $('.name0').find('p').text();
    $('.name1').find('p').text();

</script>

When there are three .name p

<p class="name name0">
    <p>test</p>
</p>
<p class="name name1">
    <p>test2</p>
</p>
<p class="name name2">
    <p>test3</p>
</p>

Then the final code in <script> should be 

<script>
    $('.name0').find('p').text();
    $('.name1').find('p').text();
    $('.name3').find('p').text();
</script>

How can we achieve this effect?

三叔三叔2725 days ago800

reply all(2)I'll reply

  • 阿神

    阿神2017-06-12 09:31:03

    Do you want the return result in fun1() to be used as the execution js statement? ? You can use eval() to execute

    reply
    0
  • 三叔

    三叔2017-06-12 09:31:03

    You can directly define fun1 to return the text of the specified className DOM, and then just run it directly. Anyway, when you generate code, you want to execute it immediately. 

    function func1(className) {
    return $(className).find("p").text();
}

for (var i = 0; i < $(".name").length; i++) {
    console.log(`name${i} p:`, func1(`.name${i}`));
}

    You don’t need to dynamically generate scripts, the script itself is very flexible. The code below is equivalent to the one you want to generate

    var textArray = $(".name p")
    .map(function() {
        return $(this).text()
    }).toArray();

    If you want to loop through each .name p you can directly 

    $(".name p")
    .each(function() {
        $p = $(this);
        // ....
    })

    If you want to process the specified name, you can

    // ES6 语法，若需要可转换为 es5 的
var textArray = ["name1", "name2", "namen"]
    .map(name => $(`.${name}`))
    .map($name => $name.children("p").text());
    // 这里本来就是原生数组，不需要 toArray()

    So what you want to do must be handled by dynamically generated scripts? If it is really needed, this is usually done by the server, not the front end. If the front-end can generate a script to run, it can definitely run a certain piece of code directly...

    reply
    0
  • Cancelreply