如果代表学生姓名的div
,我的数字非常大<div class="student" style="color: black;">Student 1 </div>
<div class="student" style="color: blue;">Student 2</div>
<div class="student" style="color: red;">Student 3 </div>
etc
现在我需要将每个学生的div替换为以下结构
<div class="student-parent">
<div class="student" style="color: {color of student}"> </div>
<br>
<div class="student-text"> {name of student} </div>
</div>
例如:对于学生1,我需要将其替换为
<div class="student-parent">
<div class="student" style="color:black"> </div>
<br>
<div class="student-text"> Student 1 </div>
</div>
如何使用css或jQuery执行此操作。由于有超过1000个学生div我不能将所有div结构重写为新的div结构请帮助。
答案 0 :(得分:3)
你可以使用jQuery ......但是你肯定需要构建生成的服务器端代码,因为浏览器可能会为这么大的DOM操作而哭泣。
但这就是方法:
$(function () {
$(".student").each(function () {
$(this).wrap('<div class="student-parent" />')
.after('<div class="student-text">' + $(this).text() + '</div>')
.after('<br />')
.text("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="student" style="color: black;">Student 1 </div>
<div class="student" style="color: blue;">Student 2</div>
<div class="student" style="color: red;">Student 3 </div>
很少指针继续前进:
答案 1 :(得分:1)
使用jQuery和Mustache模板,它看起来很简单:
var tpl = '<div class="student-parent">'+
'<div class="student" style="color: {{color}}"> </div>'+
'<br>'+
'<div class="student-text">{{name}}</div>'+
'<br>'+
'</div>';
$( ".student" ).each(function( index ) {
var data = {
color: $(this).css("color"),
name: $(this).text()
};
var html = Mustache.to_html(tpl, data);
$(this).replaceWith(html);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<div class="student" style="color: black;">Student 1 </div>
<div class="student" style="color: blue;">Student 2</div>
<div class="student" style="color: red;">Student 3 </div>
&#13;