JS 改变 HTML 元素位置后重新渲​​染 CSS

Question

我有一个独特的情况要解决。有 10 个divs，每个在左边有一个图像，在右边有一个段落。现在，我正在使用 CSS nth-child() 选择器来切换左侧所有奇数 div 图像的位置，以使用 Flex 的 order 属性显示在右侧。

用笔来说明问题-https://codepen.io/rpmcmurphy/pen/dyNaRJw

问题是当我使用 JS 重新排序父 divs 时，所有 10 个随机，他们带走了 nth-child(odd)，这意味着两个/三个奇数的父母一个接一个地出现。这是我想要实现的目标的直观表示-

它们在页面加载时的情况-

<div> // div 1
    <img src=""> <p>Hello</p>
<div>
.......
<div> // div 10
    <img src=""> <p>Hello</p>
<div>

我在做什么-

1. All 10 parent divs will rearrange randomly (using JS I am already doing that)
2. All the ODD `div`s will push the <IMG> to the right side (using flex's order property to do that)

这两个技巧单独工作。但是当组合起来时，这就是页面的样子-

<div> // div 1
    <img src=""> <p>Hello</p>
<div>
<div> // div 2
    <p>Hello</p> <img src="">
<div>
<div> // div 3, previously div 10 before JS rearranged it, for example
    <img src=""> <p>Hello</p>
<div> // div 4
    <img src=""> <p>Hello</p>
<div>
.......

为所有奇数 div 设置了 flex 顺序，例如，当 JS 将原来的 div 10 转换为上面的 div 3 时，它应该得到我为 ODD 孩子编写的 CSS 并设置 @ 987654331@ 标记在右侧，原来是 10 号（偶数），现在 JS 将它变成了 3 号（奇数）。它不会将新的 CSS 拾取为 ODD，即使它由 JS 切换，它也会保持不变。

Answer 1

试试这个 CSS，我想这就是你想要的。

.row:nth-child(odd) > div:nth-child(1) {
  order: 20 !important;
  border: 3px solid red;
}
.row:nth-child(odd) > div:nth-child(2) {
  order: 10 !important;
  border: 3px solid red;
}