CODEWITHSUNDEEP
javascriptjqueryreplacereplacewith
Estrobyn
Estrobyn

Reputation: 11

Replace <img> with <object>

Here is a little challenge: I'm trying to replace all three <img ...> tags in the code below completely by another tag named <object ...>. I Tried with jQuery .replaceWith() but didn't get it. 

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

I can't change any of the classes or add any ID or class names. And I can't change the code in any way. I can just add some Javascript / jQuery in an .js file that is already attached.

What makes things even more difficult is the fact, that I have to add the Javascript to every page on the website, but the replacement should only take place on a subpage called «spots» (e.g. .com/cms/anything/spots).

This is the code:

<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>

Has anyone got a clue?

Upvotes: 1

Views: 802

Answers (3)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93611

You can create a new object element, with all the attributes of the old one and then replace the img tag.

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

If it were not an img you would also copy the innerHTML using .html().

The end result of the JSFiddle looks like:

<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>

The other minor detail you mentioned was matching a specific page only (difficult to test in a 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);
        });
     }
});

Upvotes: 0

A-Tomy-k
A-Tomy-k

Reputation: 91

The other users have given the code for the replacement, but forgot to explain how the code must act to execute only in the target page

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

With this, the script will check if the page is the correct before executing the code.

Upvotes: 0

Adjit
Adjit

Reputation: 10305

Once a dom element is created, the tag is immutable.

You would have to remove the image element and replace it with an object. So you would need to get all of the information you need and then add an object element.

So you could do something like this:

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

Upvotes: 1

Related Questions