jQuery用其他div值替换div

我在使用WordPress内容过滤器和前端编辑器自动保存时去除iframe的问题。jQuery用其他div值替换div

作为一种解决方法，我使用隐藏的自定义帖子元div的url值替换了“video-container”div和iframe，因为WordPress自动过滤这些url并创建iframe。

到目前为止，它可以工作，但每个视频容器都被第一个后置元值替换，并且必须遍历所有值，如果有的话，替换每个视频容器。

我只是在学习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 & ID的增量由一个）

<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_ *”divs（自定义帖子元）。

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

如果找不到“embedurl_ *”divs/values，但存在“video-container”div，我们只需将其替换为“VIDEO PLACEHOLDER”即可。

对于任何不熟悉的用户/作者unfiltered_html capability的新用户，

来源

2014-06-22 user2243139

欢迎SO简单地访问内容与特定的类。什么是'＃barley_the_content'？ –

它是一个前端编辑器的包装器，允许您编辑该div内的任何内容。 – user2243139

你可以通过循环的index到: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"]')

来源

2014-06-22 11:10:05

只是一个建议队友，虽然这段代码可能会解决问题，但最好详细说明代码中修复的内容以及原因。这样做可以帮助那些面临同样问题的新手理解解决方案，而不是盲目使用它。 – Harry

@哈利，我希望更新解释它（*，它的工作原理 - 不熟悉wordpress和这里发生了什么*）:) –

谢谢蒂尔温欢乐！这做到了！ – user2243139

这是可能工作的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();

来源

2014-06-22 03:52:29 TribalChief

下面这段简单的代码应该可以做到。如果找不到div.video-container，则代码不会出错;它只是不会执行。这是jQuery的美丽之一。

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

来源

2014-06-22 05:10:04 PeterKA

纠正我，如果我错了，但根据[：eq（）选择器]（http://api.jquery.com/eq-selector/）eq允许您使用值的选择器的目标。使用你的代码，它的目标是“0”索引，它将所有的视频容器div更改为第一个值。他们必须循环embedurl_ *值。 – user2243139

@ user2243139，你是对的。感谢您的纠正;这是我的一个疏忽。我更新了我的代码。 – PeterKA

jQuery用其他div值替换div

回答

相关问题