将 <img> 替换为 <object>

Question

这里有一个小挑战：我试图用另一个名为<object ...> 的标签完全替换下面代码中的所有三个<img ...> 标签。我尝试使用 jQuery .replaceWith() 但没有得到它。

$( document ).ready(function() {
    $("div.gallery_content > div > ul > li:firstchild > img").replaceWith( "<object>...</object>" );
});

我无法更改任何类或添加任何 ID 或类名。而且我无法以任何方式更改代码。我可以在已附加的 .js 文件中添加一些 Javascript / jQuery。

让事情变得更加困难的是，我必须将 Javascript 添加到网站上的每个页面，但替换只能在名为 «spots» 的子页面上进行（例如 .com/cms/anything/ 斑点）。

这是代码：

<div class="gallery_content">
    <div id="navkeys" style="visibility: hidden;"></div>
    <div>
        <ul style="width: 2281px; margin-left: 0px;">
            <li style="margin-left: 0px;">
                <img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
                <div class="gallery_details">
                    Some Text
                </div>
            </li>
            <li>
                <img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
                <div class="gallery_details">
                    Some Text
                </div>
            </li>
            <li>
                <img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
                <div class="gallery_details">
                    Some Text
                </div>
            </li>
        </ul>
    </div>
</div>

有人知道吗？

Answer 1

一旦创建了 dom 元素，标签就是不可变的。

您必须删除图像元素并将其替换为对象。因此，您需要获取所需的所有信息，然后添加一个对象元素。

所以你可以这样做：

$("div.gallery_content > div > ul > li:firstchild > img").each(function() {
    var src = $(this).attr('src');
    var width = $(this).attr('width');
    .
    .
    .
    etc...

    $(this).remove();

    $('<object>...</object>').prependTo('li') //or whatever your selector is to prepend.
});

Answer 2

您可以创建一个新的object 元素，具有旧元素的所有属性，然后替换img 标记。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/z9u5dxgu/2/

$(document).ready(function () {
    $("div.gallery_content > div > ul > li > img").each(function () {
        // create a new object
        var $object = $('<object>');
        $object.html($(this).html());
        // copy all the attributes
        var attributes = $(this).prop("attributes");
        // loop through attributes and apply them to object
        $.each(attributes, function () {
            $object.attr(this.name, this.value);
        });
        $(this).replaceWith($object);
    });
});

如果不是img，您还可以使用.html() 复制innerHTML。

JSFiddle 的最终结果如下：

<li style="margin-left: 0px;">
    <object src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;"></object>
    <div class="gallery_details">Some Text</div>
 </li>

您提到的另一个小细节是仅匹配特定页面（很难在 JSFiddle 中测试）：

$(document).ready(function () {
    if (window.location.href.indexOf("/cms/anything/spots") > 0){
        $("div.gallery_content > div > ul > li > img").each(function () {
            // create a new object
            var $object = $('<object>');
            $object.html($(this).html());
            // copy all the attributes
            var attributes = $(this).prop("attributes");
            // loop through attributes and apply them to object
            $.each(attributes, function () {
                $object.attr(this.name, this.value);
            });
            $(this).replaceWith($object);
        });
     }
});

Answer 3

其他用户已经给出了替换代码，但忘记解释代码必须如何执行才能仅在目标页面中执行

var targetPath = "com/cms/anything/spots";        

$(window).load(function(){
    currentPath = window.location.pathname;
    //Checks if the current page coincides with the target page
    if(currentPath.indexOf(targetPath)+targetPath.length === currentPath.length){
        functionThatReplaces();    
    }
});

这样，脚本将在执行代码之前检查页面是否正确。