Question

我遇到了WordPress内容过滤器和前端编辑器在自动保存时去除iframe的问题。

作为一种解决方法，我正在替换＆＃34;视频容器＆＃34; div和iframe与隐藏的自定义帖子元div的url值，因为WordPress会自动过滤这些网址并创建iframe。

到目前为止，它仍然有效，但每个视频容器都被第一个post meta值替换，它必须循环遍历所有值，如果有的话，替换每个视频容器。

我只是学习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>

带有我需要的网址的隐藏帖子元素示例:(最多3＆amp; ID＆＃39; s增加1）

<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('\r\n VIDEO PLACEHOLDER \n');
            }           
        });
    }
}

这基本上检查大麦包装器（前端编辑器）和＆＃34;视频容器＆＃34;存在，如果是，它寻找＆＃34; embedurl _ *＆＃34; divs（custom post meta）。

如果有自定义的后置元值，则每个值都会替换相应的＆＃34;视频容器＆＃34; DIV。这可以防止WordPress在自动保存时删除iframe标记。

如果没有＆＃34; embedurl _ *＆＃34;找到了div / values，但是＆＃34;视频容器＆＃34; div存在，我们只需用＆＃34; VIDEO PLACEHOLDER＆＃34;替换它。

对于WordPress的新用户，这可以帮助您避免向不受信任的用户/作者提供unfiltered_html capability。

Answer 1

以下是可能有效的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();

Answer 2

以下简单的代码应该可以解决问题。如果未找到div.video-container，则代码不会出错;它只是不会执行。这是jQuery的优点之一。

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

Answer 3

您可以通过将.embedurl循环传递给:eq选择器来访问相应的index。但是，在访问它的值之前，您需要检查它是否存在。

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() );
      });
 }
}

旁注：您可以使用.运算符（例如$('div.video-container')而不是$('div[class="video-container"]')

来访问具有特定类的元素

jQuery用其他div的值替换div

3 个答案: