jQuery заменяет divs значениями из других divs

#jquery #html #wordpress #loops #replace

#jquery #HTML #wordpress #циклы #заменить

Вопрос:

У меня возникла проблема с фильтрами содержимого WordPress и редактором интерфейса, выделяющим iframes при автоматическом сохранении.

В качестве обходного пути я заменяю div и iframe «видео-контейнера» значениями URL-адресов скрытых пользовательских мета-разделов post, поскольку WordPress автоматически фильтрует эти URL-адреса и создает iframes.

Пока это работает, но каждый видео контейнер заменяется первым мета-значением post, и он должен перебирать все значения, если таковые имеются, заменяя каждый видео контейнер.

Я только изучаю js, поэтому буду признателен за любую помощь.

Пример видео контейнера: (максимум 3)

 <div class="video-container">
     <iframe width="500" height="281" src="https://www.youtube.com/embed/q7ZnNPzEBU4?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
 </div>
 

Пример скрытой мета-записи с нужными мне URL-адресами: (максимум 3 и увеличение идентификатора на единицу)

 <input type="hidden" id="embedurl_1" class="embedurl" value="https://www.youtube.com/watch?v=q7ZnNPzEBU4">
 

jQuery до сих пор: (работает, но только с одним значением из скрытой мета)

 if( $('#barley_the_content').length ) {
     if( $('.video-container').length ) {
          $('div[class="video-container"]').each(function (i,v) {
               $( this ).replaceWith( $( ".embedurl" ).val() );
          });
     }
}
 

Окончательный рабочий код:

 if($('#barley_the_content').length){
    if($('.video-container').length){
        $('div[class="video-container"]').each(function (i,v){
            if($(".embedurl:eq(" i ")").length){
                $(this).replaceWith($(".embedurl:eq(" i ")").val());
            } else {
                $(this).replaceWith('rn VIDEO PLACEHOLDER n');
            }           
        });
    }
}
 

Это в основном проверяет, присутствует ли оболочка barley (редактор интерфейса) и «видео-контейнер», и если да, то он ищет divs «embedurl_ *» (пользовательская мета post).

Если есть пользовательские мета-значения post, каждое из них заменит соответствующий div «видео-контейнер». Это не позволяет WordPress удалять теги iframe при автоматическом сохранении.

Если не найдено никаких divs / значений «embedurl_ *», но div «video-container» существует, мы просто заменяем его на «VIDEO PLACEHOLDER».

Для тех, кто новичок в WordPress, это избавит вас от предоставления ненадежным пользователям / авторам возможности unfiltered_html.

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

1. Добро пожаловать в SO. Что такое #barley_the_content ?

2. Это оболочка для редактора интерфейса, которая позволяет редактировать любое содержимое в этом div.

Ответ №1:

Вы можете получить доступ к соответствующему .embedurl , передав index цикл of селектору :eq . Однако вы должны проверить, существует ли оно или нет, прежде чем обращаться к его значению.

 if( $('#barley_the_content').length ) {
 if( $('.video-container').length ) {
      $('div.video-container').each(function (i,v) {
           if($(".embedurl:eq(" i ")").length)
           $( this ).replaceWith($(".embedurl:eq(" i ")").val() );
      });
 }
}
 

примечание: вы можете просто получить доступ к элементам с определенным классом, используя . оператор like $('div.video-container') вместо $('div[class="video-container"]')

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

1. Просто предложение, приятель, хотя этот фрагмент кода может решить проблему, всегда лучше уточнить, что было исправлено в коде и почему. Это поможет новичкам, которые сталкиваются с той же проблемой, понять решение, а не слепо использовать его.

2. @Harry я надеюсь, что обновление объясняет это ( и это тоже работает — не знаком с WordPress и тем, что здесь происходит ) 🙂

Ответ №2:

Вот упрощенная версия jQuery, которая может сработать.

 function replaceIt(){
    //if( $('#barley_the_content').length ) {
         if( $('.video-container').length ) {
              $('div.video-container').each(function (i,v) {
                   $( this ).replaceWith( $( "#embedurl_"   (i 1) ).val() );
              });
         }
   // }
}
replaceIt();
 

Ответ №3:

Следующий простой фрагмент кода должен сделать свое дело. Если не div.video-container найдено, код не выдаст ошибку; он просто не будет выполняться. Это одна из прелестей jQuery.

       $('div[class="video-container"]').each(function (i,v) {
           $( this ).replaceWith( $( ".embedurl" ).eq(i).val() );
      });
 

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

1. Поправьте меня, если я ошибаюсь, но согласно :eq() Селектор eq позволяет настроить селектор со значением. В вашем коде он нацелен на индекс «0», который изменяет все divs видео контейнера на 1-е значение. Они должны перебирать значения embedurl_* .

2. @user2243139, ты абсолютно прав. Спасибо за исправление; это был недосмотр с моей стороны. Я обновил свой код.