javascript - 如何按类标识符重新排列由 div 组成的列表

Question

我得到了一些html页面。我的任务是通过使用它们的类标识符来修改内容的顺序而不修改 html 。

这是下面给出的html：

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

我可以使用 javascript、jquery 和 css（如果可能）。

目标是更改顺序，使其如下所示：

main header for list
1
header1

2
3
4
header2

5
6

编辑： 引起我注意的是，我必须包括最初的努力。（我很抱歉第一篇文章..）这是最初的做法： https ://jsfiddle.net/Lwk2hor7/

标签： javascripthtmljquery

Answer 1

兄弟，你可以用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>