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

时间:2016-11-23 12:41:43

标签: javascript jquery html css css3

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

2 个答案:

答案 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模板,它看起来很简单:

&#13;
&#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;
&#13;
&#13;