jQuery 用其他 div 的值替换 div

Question

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

作为一种解决方法，我将“视频容器”div 和 iframe 替换为隐藏的自定义帖子元 div 的 url 值，因为 WordPress 会自动过滤这些 url 并创建 iframe。

到目前为止，它可以工作，但是每个视频容器都被第一个 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>

带有我需要的网址的隐藏帖子元示例：（最多 3 个和 ID 的增量为 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');
            }           
        });
    }
}

这主要是检查大麦包装器（前端编辑器）和“视频容器”是否存在，如果存在，它会查找“embedurl_*”div（自定义帖子元）。

如果有自定义帖子元值，每一个都将替换相应的“视频容器”div。这可以防止 WordPress 在自动保存时删除 iframe 标记。

如果没有找到“embedurl_*”div/值，但存在“video-container”div，我们只需将其替换为“VIDEO PLACEHOLDER”。

对于刚接触 WordPress 的任何人，这可以避免您向不受信任的用户/作者提供 unfiltered_html capability。

Answer 1

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

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"]')）简单地访问具有特定类的元素

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

Answer 3

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

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