Цикл jQuery для создания div и добавления к ним содержимого

Я пытаюсь создать цикл jQuery, который:

  1. ищет в соответствующем сообщении WordPress любые изображения или фреймы
  2. создает новый div для каждого из них и вставляет изображение или iframe в div
  3. визуально переупорядочивает вещи, чтобы эти недавно созданные и вновь заполненные элементы div отображались там, где я хочу (в данном случае над постом и заголовком поста).

Я пытался больше недели, чтобы сделать это, и был близок, но что-то всегда не так.

jQuery("document").ready (function(){
   jQuery(".para img, iframe").each(function(){
      jQuery(this).prependTo(jQuery(this).parents(".wrapper940"));

      var ndiv = jQuery("<div></div>");
      jQuery(ndiv).append(this);
   })
});

Итак, в приведенном выше коде я ищу любые изображения или фреймы в классе .para, затем запускаю для них функцию «каждый», чтобы добавить их к родительскому элементу сообщения (.wrapper940), а затем, когда они там, я пытаюсь чтобы создать новый div для каждого изображения/iframe.

В этой конкретной версии кода он просто не отображает изображения или фреймы вообще, поэтому я предполагаю, что мне нужно как-то «распечатать» элемент ndiv? Мои изображения и фреймы исчезли в переменной и больше не отображаются?

Извините за двусмысленность и, возможно, чрезмерно конкретный пост; Я недостаточно знаю о том, с чем имею дело, чтобы задать более острый вопрос.


wordpress loops jquery each prepend
person user2654408    schedule 17.07.2014    source источник
comment
Я не знаю, какова ваша структура HTML, но как только вы создадите новые элементы, вы должны добавить их к существующему элементу DOM.   -  person pmandell    schedule 17.07.2014
comment
Вам нужно изменить свой селектор с '.para img, iframe' на '.para img, .para iframe'.   -  person Joe    schedule 17.07.2014
comment
josmh - спасибо, но это не решает основную проблему   -  person user2654408    schedule 17.07.2014
comment
Вот почему я прокомментировал;) Я работаю над ответом на вопрос.   -  person Joe    schedule 17.07.2014
comment
@pmandell - не могли бы вы быть более конкретным? У меня раньше было это (которое тоже не работало): jQuery(".para img, iframe").each(function(){ var ndiv = jQuery("<div></div>"); jQuery(ndiv).append(this); jQuery(ndiv).prependTo(jQuery(this).parents(".wrapper940")); })   -  person user2654408    schedule 17.07.2014

Ответы (1)


arrow_upward
1
arrow_downward

Сначала вы добавляете img или iframe к вашему «.wrapper940», но затем сразу же добавляете свой img/iframe к вновь созданному div, который ни к чему не подключен. Ваша самая первая операция полностью отменяется второй (добавляя ее к div, вы автоматически удаляете ее из оболочки). Я предполагаю, что вы на самом деле хотите, чтобы все ваши изображения и кадры сначала добавлялись к новому элементу div, а затем этот элемент div фактически помещался в оболочку...

jQuery("document").ready (function(){
   jQuery(".para img, iframe").each(function(){
      // First I create the div element.
      var ndiv = jQuery("<div></div>");

      // Now I put the div element into the wrapper, instead of the 'this'
      ndiv.prependTo(jQuery(this).parents(".wrapper940"));

      // Last I put 'this' into the div.
      ndiv.append(this);
   })
});
person Lochemage    schedule 17.07.2014
comment
Господи, что сработало! Так заканчивается неделя безумного разочарования. Так быстро. БЛАГОДАРЮ ВАС!! - person user2654408; 17.07.2014
comment
Np человек, я делал то же самое много раз. Иногда это трудно увидеть. - person Lochemage; 17.07.2014
comment
И спасибо за объяснение - теперь это так ясно, что я это вижу. - person user2654408; 17.07.2014
comment
Быстрый дополнительный вопрос: если я теперь хочу настроить таргетинг на эти недавно созданные div и добавить класс к :first из них, как мне это сделать? Могу ли я сделать это внутри .each или это должно происходить вне цикла? И нужно ли мне jQuery(ndiv, или это, или класс, который я добавил в новые div)?? Большое спасибо за вашу помощь. - person user2654408; 18.07.2014
comment
Вы, вероятно, захотите сделать это вне цикла, но вам нужно будет каким-то образом выбрать свои элементы div. Как только вы это сделаете, вы можете использовать функцию JQuery first(), чтобы просто воздействовать на первый найденный элемент. - person Lochemage; 18.07.2014