我的程式碼如下
<!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}`));
}
//第一次循環(huán)生成語句: $('.name0').find('p').text();
//第二次循環(huán)生成語句: $('.name1').find('p').text();
</script>
</body>
</html>
我並不是想取得每個P的值,只是打個比方。我想知道如何才能透過func1()的回傳值動態(tài)渲染<script>裡面的程式碼?或是如何才能動態(tài)渲染js檔案
我想目前程式碼的這個檔案根據(jù).name p 動態(tài)產(chǎn)生js程式碼,如
當(dāng)有兩個.name p
<p class="name name0">
<p>test</p>
</p>
<p class="name name1">
<p>test2</p>
</p>
那麼<script>裡面最終的程式碼應(yīng)該是
<script>
$('.name0').find('p').text();
$('.name1').find('p').text();
</script>
當(dāng)有三個.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>
那麼<script>裡面最終的程式碼應(yīng)該是
<script>
$('.name0').find('p').text();
$('.name1').find('p').text();
$('.name3').find('p').text();
</script>
請問一下如何才能達(dá)到這樣的效果?
你是想fun1() 裡面的return的結(jié)果當(dāng)執(zhí)行js語句? ?可以用eval()才執(zhí)行
你可以直接定義 fun1 回傳指定 className
DOM 的 text,後面直接跑就行哇。反正你產(chǎn)生程式碼也是想立即執(zhí)行的。
function func1(className) {
return $(className).find("p").text();
}
for (var i = 0; i < $(".name").length; i++) {
console.log(`name${i} p:`, func1(`.name${i}`));
}
你不需要動態(tài)產(chǎn)生腳本啊,腳本本身是很靈活的東西。下面這段程式碼與你想產(chǎn)生的那一段等效
var textArray = $(".name p")
.map(function() {
return $(this).text()
}).toArray();
如果你想循環(huán)處理每一個 .name p
可以直接
$(".name p")
.each(function() {
$p = $(this);
// ....
})
如果你想處理指定名稱的,可以
// ES6 語法,若需要可轉(zhuǎn)換為 es5 的
var textArray = ["name1", "name2", "namen"]
.map(name => $(`.${name}`))
.map($name => $name.children("p").text());
// 這里本來就是原生數(shù)組,不需要 toArray()
所以你要做的事情一定要用動態(tài)產(chǎn)生腳本來處理嗎?如果真的需要,這一般也是服務(wù)端幹的事情,而不是前端做的事情。前端可以產(chǎn)生腳本來運(yùn)行,就一定可以直接運(yùn)行某段程式碼…