如何通过jquery和css更改div的顺序-解网

问：

我有这个容器：

<div id="mycontainer" class="main">
  <div class="content">Content here</div>
  <div class="title">title here</div>
</div>

我使用 jquery 克隆 div 并将其附加到另一个 div：

var $cloneBrick = $this.clone().prop("id", "mycontainerNEW");
$("#infopane").append($cloneBrick);

在我获取容器的主页上，它在内容之前显示标题。如果我克隆它并将其添加到另一个 div，它会在内容后显示标题。

我无法更改主页！我必须使用 jquery 或 css 在克隆的元素中对其进行重新排序。

更改 div 顺序的最佳方法是什么？

** 编辑 ** 这是标题主页中的 css 代码：

.mainpage .main .title {
    display: block;
    color: #5b5b5b;
    background: rgba(227, 227, 227, 0.4);
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    margin-right: 80px;
    position: absolute;
    text-align: left;
    line-height: 40px;
    font-size: 12px;
}

如果标题是主页的一部分，则将按 top=0 left=0 将其设置为显示为容器的头部。但我在主页之外克隆了它

编辑基于提供的代码的代码段：

var $cloneBrick = $("#mycontainer").clone().prop("id", "mycontainerNEW");
$("#infopane").append($cloneBrick);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mycontainer" class="main">
  <div class="content">Content here</div>
  <div class="title">title here</div>
</div>

<hr/>

<div id="infopane">

</div>

jQuery CSS的

我根据您提供的代码添加了一个代码片段。正如你所看到的，只给出提供的代码，它不会按照你说的去做 - 顺序被保留。“在我获取容器的主页上，它在内容之前显示标题” - 由于 div 顺序是内容然后是标题，因为它显示标题然后是内容，那么这将通过 js 更改，或者更有可能应用了一些 CSS（类似于上面@tacoshy注释） - 即 css 已经应用于现有元素。您需要更改 css 规则（或添加新规则），以便它也适用于您的新内容。

1赞 freedomn-m 11/15/2023

如果没有一个最小的可重现示例（甚至，我敢说，结果的屏幕截图），很难说出“之前显示”是什么意思 - 它可能是一个简单的规则（或更具体的规则，因此不适用于您的新容器）。这将把“标题放在内容之前”：jsfiddle.net/kgoh4ju8.content { float:right }#mycontainer .content { float:right }

0赞 user6625547 11/15/2023

每个 div 都是一整行，因此内容在标题之前，但标题需要按顺序排在第一位。

答：

0赞 Burham B. Soliman 11/15/2023 #1

您可以按照代码段中的步骤将 css 设置为克隆版本，将克隆的元素显示为，并将 flex direction 设置为，flexreverse

var $cloneBrick = $("#mycontainer").clone().prop("id", "mycontainerNEW");
$("#infopane").append($cloneBrick);

 #mycontainerNEW {
  display: flex;
  flex-direction: column-reverse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mycontainer" class="main">
  <div class="content">Content here</div>
  <div class="title">title here</div>
</div>

<hr/>

<div id="infopane">

</div>

上一个：下载具有数据 URI 的多个文件

下一个：如何在 Angular 中传递数据库查询获取 API URL

如何通过jquery和css更改div的顺序

how can i change order of div by jquery and css

评论