更改元素類型

Question

目標：如果自定義元素類型（前<media ...>）有幾個src文件擴展名，更改自定義元素類型，以正確反映一個（前m4v，jpg ...。）元素適當地顯示src。

我想也許我的jQuery選擇器media元素可能是問題？

jQuery(function($){ 
    $(document).ready(function($) { 
    $.fn.changeElementType = function(newType) { 
     var attrs = {}; 

     $.each(this[0].attributes, function(idx, attr) { 
      attrs[attr.nodeName] = attr.nodeValue; 
     }); 

     this.replaceWith(function() { 
      return $("<" + newType + "/>", attrs).append($(this).contents()); 
     }); 
    } 
    })(jQuery); 


    $("media").has('[src$=".jpg"]').changeElementType("img"); 
    $("media").has('[src$=".m4v"]').changeElementType("video"); 
}); 

到目前爲止，在運行此操作時，Chrome控制檯會報告jQuery錯誤......但據我所知，一切都已正確聲明。語法或誤解的東西？

編輯：這裏是錯誤報告

Uncaught TypeError: object is not a function 
(anonymous function) 
l jquery.min.js:2 
c.add jquery.min.js:2 
v.fn.v.ready jquery.min.js:2 
v.fn.v.init jquery.min.js:2 
v jquery.min.js:2 
(anonymous function) 
(anonymous function) jquery.min.js:2 
v.extend.globalEval jquery.min.js:2 
(anonymous function) jquery.min.js:2 
v.extend.each jquery.min.js:2 
v.fn.extend.domManip jquery.min.js:2 
v.fn.extend.append jquery.min.js:2 
(anonymous function) jquery.min.js:2 
v.extend.access jquery.min.js:2 
v.fn.extend.html jquery.min.js:2 
(anonymous function) jquery.min.js:2 
l jquery.min.js:2 
c.fireWith jquery.min.js:2 
T jquery.min.js:2 
r 

•這一個WordPress noConflict模式下運行

Answer 1

嘗試以下操作：

編輯

我做了細微的調整到元素和圖像標籤的輸出。它正在輸出<img></img>這是無效的。請參閱更新的小提琴

http://jsfiddle.net/denniswaltermartinez/TjGzZ/

http://jsfiddle.net/denniswaltermartinez/TjGzZ/3/

只是一些小的調整。

jQuery(function ($) { 

    $.fn.changeElementType = function (newType) { 

     if (!this.length) return; // added 

     var attrs = {}; 

     $.each(this[0].attributes, function (idx, attr) { 
      attrs[attr.name] = attr.value; 
     }); 

     this.replaceWith(function() { 

      var element = $('<' + newType + '/>', attrs); 

      if (newType !== 'img') 
       element.append($(this).contents()); 

      return element; 
     }); 
    }; 

    $('media[src$=".png"]').changeElementType('img'); // changed slightly 
    $('media[src$=".m4v"]').changeElementType('video'); // changed slightly 
}); 

而不是

$("media").has('[src$=".jpg"]').changeElementType("img");

已更改至

$('media[src$=".png"]').changeElementType('img');

，當然你可以改變.png任何你想要的，我只是用於測試一個PNG 。

該插件也有一個小的調整，只是檢查是否存在該元素，如果不是不做任何事情。如果該檢查不存在，它會對你大喊，因爲它會嘗試獲取未定義元素的屬性。