Question

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

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

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

事情变得更加困难的事实是，我必须将Javascript添加到网站上的每个页面，但更换应仅在名为«spot»的子页面上进行（例如.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，您还可以使用innerHTML复制.html()。

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

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

将<img/>替换为<object> </object>

3 个答案: