Question

如果代表学生姓名的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结构请帮助。

Answer 1

你可以使用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>

很少指针继续前进：

应该从服务器端进行结构化或生成代码。
使用分页，不要一次在客户端加载大量数据。

Answer 2

使用jQuery和Mustache模板，它看起来很简单：

＆＃13;

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;

使用css jquery将div结构更改为新的div结构

2 个答案: