在JS更改HTML元素的位置后重新呈现CSS

Question

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

一支笔来说明这个问题- https://codepen.io/rpmcmurphy/pen/dyNaRJw

问题是，当我使用JS对所有10个父div进行重新排序时，它们会随身携带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设置的灵活顺序，当JS将原始的CSS 10带入上面的div 3时，它应该获得我为奇数子元素编写的CSS并将img标记设置在右侧，因为它最初是数字10 (偶数)，现在JS将其设置为数字3(奇数)。它不会把新的CSS当作奇数，即使它被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;
}