Блог

Главная - Вопросы по программированию - jquery изменяет положение элемента в dom

jquery изменяет положение элемента в dom

#jquery #html

#jquery #HTML

Вопрос:

Эй, я хочу изменить положение какого-либо элемента в DOM, например .устаревший в .teach2, но если эти элементы дважды или более на странице, он добавляет два или более элемента вместо одного, так что в результате я получил четыре .устаревшие элементы на странице вместо двух .. Можетя как-то это предотвращаю? Приветствуются любые советы..

 if ($(window).width() < 767) {

        $(".teach2 .off-place").prependTo($(".teach2 .off-date"));

     }


       <div class="teacher-box teach2">

            <span class="typo off-name">Magdalene</span>
            <span class="typo off-type">with partners</span>
            <span class="typo off-date">wed DEC 15 </span>
            <span class="typo off-time">19.30 - 20.30</span> 
            <span class="typo off-place">at home</span>

        </div>

        <div class="teacher-box teach2">

            <span class="typo off-name">Magdalene</span>
            <span class="typo off-type">with partners</span>
            <span class="typo off-date">wed DEC 15 </span>
            <span class="typo off-time">19.30 - 20.30</span>
            <span class="typo off-place">at home</span> 

        </div>

Комментарии:

1. Не возражаете против создания JSFiddle с проблемой?

2. можете ли вы четко объяснить, куда вы хотите поместить устаревшее, вы упомянули, чтобы изменить устаревшее, но в коде, который вы написали как неуместный, неуместного нет в разметке

3. извините, что его обновили сейчас… Мне нужно место .off-place перед, например.off-date .. это работает, но проблема в том, что он дублирует в одном окне учителя два элемента .off-place

4. Вы уверены prependTo() , что это действительно то, что вы хотите? Это поместит один пролет внутри другого пролета. Может быть, вы действительно хотите insertBefore() , чтобы они оставались на том же уровне?

Ответ №1:

Вот чего вы можете добиться в чистом css.

 .teacher-box {
  display: flex;
}
.typo {
  margin: 0 1px;
}
.off-name {
  order: 1;
}
.off-type {
  order: 2;
}
.off-date {
  order: 3;
}
.off-time {
  order: 4;
}
.off-place {
  order: 5;
}
@media (max-width: 768px) {
  .off-name {
    order: 1;
  }
  .off-type {
    order: 2;
  }
  .off-date {
    order: 4;
  }
  .off-time {
    order: 5;
  }
  .off-place {
    order: 3;
  }
} 
 <div class="teacher-box teach2">

  <div class="typo off-name">Magdalene</div>
  <div class="typo off-type">with partners</div>
  <div class="typo off-date">wed DEC 15 </div>
  <div class="typo off-time">19.30 - 20.30</div>
  <div class="typo off-place">at home</div>
  
</div>

Предполагая, что вы пытаетесь изменить положение содержимого при изменении размера окна на 768 пикселей.

Вы могли бы создать teachebox в виде гибкого макета и написать медиа-запрос для изменения в 768 пикселей;

Ответ №2:

Вам нужно использовать .each() для перебора каждого .off-place , чтобы вы могли добавить его к .off-date тому же DIV.

 $("#but").click(function() {
  $(".teach2 .off-place").each(function() {
    $(this).prependTo($(this).siblings(".off-date"));
  });
}); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but">Click to move</button>
<div class="teacher-box teach2">

  <span class="typo off-name">Magdalene</span>
  <span class="typo off-type">with partners</span>
  <span class="typo off-date">wed DEC 15 </span>
  <span class="typo off-time">19.30 - 20.30</span> 
  <span class="typo off-place">at home</span>

</div>

<div class="teacher-box teach2">

  <span class="typo off-name">Magdalene</span>
  <span class="typo off-type">with partners</span>
  <span class="typo off-date">wed DEC 15 </span>
  <span class="typo off-time">19.30 - 20.30</span>
  <span class="typo off-place">at home</span> 

</div>

Ответ №3:

Вы должны указать, какой элемент изменять. В этом могут помочь селекторы XPath или CSS.

С другой стороны, похоже, что вы пытаетесь создать адаптивную веб-страницу. Может быть, вам следует рассмотреть другой подход? Гибкие макеты, адаптивный дизайн — это уже придумано.

Комментарии:

1. Да, но даже с flexbox я не могу делать предварительные шаги в dom

2. Затем попробуйте использовать селекторы XPath или CSS или использовать идентификаторы div.

3. @AlexS ? можете ли вы пролить некоторый свет на «XPath» или «идентификаторы div»?

4. В большинстве случаев вы можете присвоить практически любому элементу идентификатор: <div id=»myDiv»> . Это позволяет вам выбрать именно этот элемент для любых целей. С помощью jQuery это будет: $(«#myDiv»). Обратите внимание, что идентификаторы должны быть уникальными на странице.

5. Что касается XPath, это способ навигации по XML-документам. Подробнее об этом можно прочитать здесь: w3.org/TR/xpath Но я серьезно сомневаюсь, что это имеет отношение к вашему делу.

Метки: