Функция jQuery для однократного запуска внутри вложенного элемента

#jquery

Вопрос:

У меня есть некоторая HTML-разметка в качестве примера ниже — я хочу использовать jQuery для перемещения divA над divB, где divB находится над divA — может кто-нибудь помочь мне добиться этого — код, который, как я думал, будет работать, добавляет новые копии divB над divA, где этого не должно быть.

 <div class="approachProcessBlockWrapper">
    <div class="divA">Content</div>
    <div class="divB">Content</div>
</div>

<div class="approachProcessBlockWrapper">
    <div class="divB">Content</div>
    <div class="divA">Content</div>
</div>

Итак, после функции jQuery она должна читать:

 <div class="approachProcessBlockWrapper">
    <div class="divA">Content</div>
    <div class="divB">Content</div>
</div>

<div class="approachProcessBlockWrapper">
    <div class="divA">Content</div>
    <div class="divB">Content</div>
</div>

Итак, во 2-м экземпляре div «approachProcessBlockWrapper» divB перемещен выше divA, и никаких изменений в 1-м экземпляре «approachProcessBlockWrapper», где divA уже находится вверху и выше divB.

Код, который я использовал, который не работает, приведен ниже — может кто-нибудь объяснить, почему это не работает?

 function approachPageDIVSwapper () {
    var windowWidth = $(window).width();

    if (windowWidth <= 1015) {
        
        $('.approachProcessBlockWrapper').each(function() {
        $(".divB").insertBefore(".divA");
        });
    }
}

$(document).ready(function() { approachPageDIVSwapper(); });

1. Если речь идет только о переупорядочении в зависимости от ширины экрана, почему бы не использовать css только для этого?

2. можете ли вы перемещать элементы в DOM с помощью CSS?

3. Конечно, с помощью flexbox и свойства order . Или даже с отображением сетки. Здесь вообще нет необходимости в медленном jQuery

Ответ №1:

Вы можете проверить внутри each цикла, является ли first div .divB , затем получить ссылку на этот div и использовать это для изменения позиции.

Демонстрационный код :

 function approachPageDIVSwapper() {
  var windowWidth = $(window).width();
  if (windowWidth <= 1015) {
    $('.approachProcessBlockWrapper').each(function() {
      //check if the first div under `approachProcessBlockWrapper` has divB
      if ($(this).find("div:first").hasClass("divB")) {
        var divs = $(this).find("div.divA"); //get refernce
        var other_divs =$(this).find("div.divB")
        $(divs).insertBefore(other_divs); //change position
      }
    });
  }
}

$(document).ready(function() {
  approachPageDIVSwapper();
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="approachProcessBlockWrapper">
  <div class="divA">ContentA</div>
  <div class="divB">ContentB</div>
</div>

<div class="approachProcessBlockWrapper">
  <div class="divB">ContentB</div>
  <div class="divA">ContentA</div>
</div>