jQuery 中传递的 HTML 中的 find()、each() 和 replacewith()

Question

我有一些 HTML 代码要传递给一个函数，该函数不是要查找所有 iframe，用图像替换 iframe 代码，然后返回修改后的 html。但是，它似乎并没有替换返回的 html 中的 iframe 代码。我很确定我只是错误地引用了 hte 替换，但在网上找不到任何类似于我试图做的例子。它们都引用搜索整个文档或在文档中显示 html 之后。此 HTML 不是也不能是由于应用程序要求。

请注意：我已经生成了 youtube 代码来替换 iframe 代码。问题在于执行替换。

function article_youtube_convert(html) {
    //go throught the iframes for youtube and convert them to embed

    $(html).find('iframe').each(function(i) {
                     alert(this.src);
        //ok what we need to do here is check if it's youtube 
        src_youtube = this.src;
        if(src_youtube.indexOf('http://www.youtube.com')!=-1){
           //so now we need the video id 
           url_parts = src_youtube.split('/');

           youtube_id = url_parts[url_parts.length-1];

           url_parts = youtube_id.split('?');
           youtube_id = url_parts[0];

           youtube_link = 'http://www.youtube.com/watch?v='+youtube_id;
           img_youtube = '<a id="tempvid" href="'+youtube_link+'"><img src="http://img.youtube.com/vi/'+youtube_id+'/0.jpg"/><br />View YouTube Video</a>';

            $(this).replaceWith(img_youtube);


                     //alert(document.getElementById('tempvid').innerHTML);  
        }
    });
    return html;


}

更新

我决定尝试使用 outerHTML 方法，并用变量中的新替换文本替换文本，如下所示。我提醒完整的来源没有问题，但它仍然不能取代它。

jQuery.fn.outerHTML = function(s) {
    return s
    ? this.before(s).remove()
    : jQuery("<p>").append(this.eq(0).clone()).html();
};


function article_youtube_convert(passed) {
    //go throught the iframes for youtube and convert them to embed
    //alert('inside');
    newhtml = passed;
    //alert(newhtml);
    $(newhtml).find('iframe').each(function(i) {
                     //alert(this.src);
        //ok what we need to do here is check if it's youtube 
        src_youtube = this.src;
        if(src_youtube.indexOf('http://www.youtube.com')!=-1){
           //so now we need the video id 
           url_parts = src_youtube.split('/');
                                   alert('youtube vid');
           youtube_id = url_parts[url_parts.length-1];

           url_parts = youtube_id.split('?');
           youtube_id = url_parts[0];

           youtube_link = 'http://www.youtube.com/watch?v='+youtube_id;
           img_youtube = '<a id="tempvid" href="'+youtube_link+'"><img src="http://img.youtube.com/vi/'+youtube_id+'/0.jpg"/><br />View YouTube Video</a>';
                                   alert('alert: '+$(this).outerHTML());
                                   sourcethe = $(this).outerHTML();
                                   passed.replace(sourcethe,img_youtube);
            //$(this).replaceWith(img_youtube);
                                   //alert($(this));


                     //alert(document.getElementById('tempvid').innerHTML);  
        }
    });
    alert(passed);
    return passed;


}

Answer 1

看起来你实际上并没有从那个函数返回你想要的......

你从来没有真正改变你的方法中的html，你只是用它来做一些被丢弃的东西，然后返回你输入的东西。

你最可能想做的事情是

var jqHtml = $(html);
...Do stuff to modify jqHtml...
return jqHtml.html();

我不确定也没有测试过的一件事是 .html() 是否返回你想要的。文档说它使用元素 innerHTML 属性，但我不确定这是否会给从字符串构造的 jquery 对象提供正确的东西（我认为它应该）。

无论如何，这是您的基本问题，您根本没有修改 html。 $(html) 正在获取html 字符串的副本，而不是对其可以根据需要进行更新的引用。

Answer 2

David，我刚刚做了一个快速测试并编写了一个包含三个 iframe 元素的简单 HTML 页面，并复制了您的代码。我将 iframe 包裹在 <div id="test"> 元素中并调用 article_youtube_convert ("div#test");。 iframe 被完美替换。

<div id="test">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/Z5y-UIjhjuM" frameborder="0" allowfullscreen></iframe>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/Z5y-UIjhjuM" frameborder="0" allowfullscreen></iframe>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/Z5y-UIjhjuM" frameborder="0" allowfullscreen></iframe>
</div>

您确定将正确的 html 上下文传递给 article_youtube_convert 函数吗？

Answer 3

我想你想要

  url_parts = youtube_id.split('?');
  youtube_id = url_parts.pop();

但请注意youtube_id 将包含v=，因此您可以这样做：url_parts.pop().substring(2)