Как поменять местами два блока на сайте, если они встречаются несколько раз?

Question

[Vartmod]

При помощи django в цикле собираю следующий шаблон, чередуя news-block-1 и news-block-2:

<div class="news-block news-block-1">
    <table class="newspaper">
    <tbody><tr>
       <th class="picture-news"></th>
       <th class="text-news"></th>
    </tr>
    </tbody></table>
</div>
<div class="news-block news-block-2">
   <table class="newspaper">
   <tbody><tr>
      <th class="picture-news"></th>
      <th class="text-news"></th>
   </tr>
   </tbody></table>
</div>
<div class="news-block news-block-1">
   <!-- ... -->
</div>
<div class="news-block news-block-2">
   <!-- ... -->
</div>
<!-- ... -->

А затем в news-block-2 меняю местами "picture-news" и "text-news" следующим кодом:

let picture = $( ".news-block-2" ).find(".picture-news");
let text = $( ".news-block-2" ).find(".text-news");
picture.insertAfter(text);

По итогу картинка из первого news-block-2 вставляется во все остальные, а мне нужно, чтобы строки таблицы менялись местами в каждом news-block-2. Как это сделать?

Answer 1

[0xD34F]

Где элементы находятся:

const parents = document.querySelectorAll('.news-block-2 tbody tr');

Как их поменять местами, в общем виде:

const swapChildren = function(el, selectorA, selectorB) {
  const a = this(el.children, n => n.matches(selectorA));
  const b = this(el.children, n => n.matches(selectorB));
  el.append(...Array.from(el.children, n => n === a ? b : n === b ? a : n));
}.bind(Function.prototype.call.bind(Array.prototype.find));

parents.forEach(n => swapChildren(n, '.picture-news', '.text-news'));

Но, поскольку кроме интересующих нас элементов никаких других нет (конечно, если верить тому, что вы показали в качестве разметки), есть варианты поступить проще:

const swapChildren = el => el.append(...[...el.childNodes].reverse());
// или
const swapChildren = el => el.appendChild(el.firstElementChild);
// или
const swapChildren = el => el.insertBefore(el.children[0], null);
// или
const swapChildren = el => el.insertAdjacentElement('beforeend', el.children[0]);
// или
const swapChildren = el => el.prepend(el.querySelector(':scope > :last-child'));
// или
const swapChildren = ({ lastElementChild: el }) => el.previousElementSibling.before(el);
// или
const swapChildren = el => el.cells[1].after(el.cells[0]);
// или
const swapChildren = ({ cells: [ a, b ] }) => a.replaceWith(b, a);

parents.forEach(swapChildren);

// или

for (const n of parents) {
  swapChildren(n);
}

// или

for (let i = 0; i < parents.length; i++) {
  swapChildren(parents[i]);
}

// или

(function next(i, n = parents.item(i)) {
  n && (swapChildren(n), next(-~i));
})(0);