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

【问题标题】：How to re-arrange list made up of divs by class identifiers如何按类标识符重新排列由 div 组成的列表
【发布时间】：2021-05-11 18:58:12
【问题描述】：

我得到了一些 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/

【问题讨论】：

欢迎来到 Stack Overflow。请帮助我们理解类关系？脚本应该如何知道在哪里放置什么？请提供您尝试过的示例或预期的 HTML 输出示例。
看到这个：stackoverflow.com/questions/220273/…
我们不是代码编写服务。请证明您付出了一些努力，然后继续。
提供你尝试过的东西
明白。下次注意。我之前确实尝试过，但总是很接近，但渲染不正确。谢谢

标签： javascript html jquery

【解决方案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 之前。

【讨论】：

不修改 html 此外，即使没有表现出最小努力的问题也不应该得到答案。
@connexo 这不会修改原始 HTML。它不需要对原始 HTML 内容进行任何更改。这可以通过 ScriptMnkey 等运行。

【解决方案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>

【讨论】：

即使没有表现出最小努力的问题也不应该得到答案。
知道了。谢谢。