-5

I was given some html page. My task is to modify the ordering of the content without modifying the html, by using their class identifiers.

This is the html that is given below:

<div class="list">
  <div class="txt">
    
  <div class="header">main header for list</div>
    
    <div class="txt">
       <div class="header">header1</div>
       <img class="img" src=""/>
       <div class="txt" > 1</div>
       <div class="txt" > 2</div>
       <div class="txt" > 3</div>
    </div>
  
    <div class="txt">
       <div class="header">header2</div>
       <img class="img" src=""/>
       <div class="txt" > 4</div>
       <div class="txt" > 5</div>
       <div class="txt" > 6</div>
    </div>


  </div>
</div>

I can use javascript,jquery and if possible css.

The goal is to change the order to make it look like this below.:

main header for list
1
header1

2
3
4
header2

5
6

Edit: It was brought to my attention that I have to include initial effort. (My apologies first post..) Here is what initially did: https://jsfiddle.net/Lwk2hor7/

Zorrow
  • 1
  • 1
  • Welcome to Stack Overflow. Please help us understand the Class relationship? How should the script know where to put what? Please provide an example of what you have tried or an example of the expected HTML Output. – Twisty May 11 '21 at 19:06
  • see this: https://stackoverflow.com/questions/220273/how-can-i-reorder-my-divs-using-only-css – Hamed Siaban May 11 '21 at 19:06
  • 2
    We are not a code-writing service. Please demonstrate that you showed some effort, then continue. – code May 11 '21 at 19:06
  • Provide what you have tried – Prosy Arceno May 11 '21 at 19:23
  • Understood. Noted for next time. I did try prior was just always close but didn't render right. Thanks – Zorrow May 11 '21 at 20:44

2 Answers2

-1

Here is an example that has the output you requested.

$(function() {
  $(".list .txt .txt").each(function(i, item) {
    var item1 = $(".txt:eq(0)", item).detach();
    item1.insertBefore($(".header", this));
  });

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <div class="txt">

    <div class="header">main header for list</div>

    <div class="txt">
      <div class="header">header1</div>
      <img class="img" src="" />
      <div class="txt"> 1</div>
      <div class="txt"> 2</div>
      <div class="txt"> 3</div>
    </div>

    <div class="txt">
      <div class="header">header2</div>
      <img class="img" src="" />
      <div class="txt"> 4</div>
      <div class="txt"> 5</div>
      <div class="txt"> 6</div>
    </div>


  </div>
</div>

This will iterate each HTML element and find the item, detach it, and insert before the Header.

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • **without modifying the html** Also, questions not even showing minimum effort shouldn't be rewarded with answer. – connexo May 11 '21 at 19:57
  • @connexo this does not modify the original HTML. It does not require any changes to the original HTML Content. This could be run via ScriptMnkey or such. – Twisty May 11 '21 at 20:00
-1

Brother, you can do it by css.

.list > .txt > .txt {
  display: flex;
  flex-direction: column;
}

.list > .txt > .txt > .img + .txt {
  order: -1;
}
<div class="list">
  <div class="txt">
    <div class="header">main header for list</div>

    <div class="txt">
       <div class="header">header1</div>
       <img class="img" src=""/>
       <div class="txt" > 1</div>
       <div class="txt" > 2</div>
       <div class="txt" > 3</div>
    </div>

    <div class="txt">
       <div class="header">header2</div>
       <img class="img" src=""/>
       <div class="txt" > 4</div>
       <div class="txt" > 5</div>
       <div class="txt" > 6</div>
    </div>
  </div>
</div>
Showrin Barua
  • 1,737
  • 1
  • 11
  • 22