如何按类标识符重新排列由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/

Answer 1

下面是一个具有您请求的输出的示例。

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

这将迭代每个HTML元素，找到项目，分离它，并在Header之前插入。

Answer 2

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