Ram Ram - 11 days ago 6
CSS Question

Changing the div structure to new div structure using css jquery

I have very large number if div that representing the student name

<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


Now I need to replace the div of each student into following structure

<div class="student-parent">
<div class="student" style="color: {color of student}"> </div>
<br>
<div class="student-text"> {name of student} </div>
</div>


For example : for student 1 i need to replace this to

<div class="student-parent">
<div class="student" style="color:black"> </div>
<br>
<div class="student-text"> Student 1 </div>
</div>


How can I do this using css or jQuery . Since there are more than 1000 student div i cannot rewrite all div structure to new div structure Please help .

Answer

You can use jQuery... But definitely you need to structure your server side code that generates, because, the browser might cry for such a huge DOM manipulation.

But this is the way:

$(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>

Few Pointers moving ahead:

  • Structure should be made from the Server Side or generating code.
  • Use pagination and don't load huge data on the client side at a single time.
Comments