javascript - 将 <img> 替换为 <object>

Question

这里有一个小挑战:我正在尝试替换所有三个 <img ...>下面代码中的标签完全由另一个名为 <object ...> 的标签标记。我尝试使用 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/ Blob )。

这是代码:

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