0

I would like to wrap a particular <img> in a <span> and also apply a class to that <span>.

Here is the relevant code:

<img id="wrapped-image" alt="" src="">

For some reason, the following is not working:

<script>
$( '#wrapped-image' ).wrap( '<span class="jquery-wrapped"></span>' );
</script>

Additional Information
The image in question is the (somewhat notorious) smiley used by Jetpack for statistics purposes. It can be seen on this site: http://barristerbeverages.com/. The javascript, supra, is also present on that site, implemented immediately after the Jetpack smiley (just view source).

Zyniker
  • 283
  • 1
  • 13
  • 3
    Well, what does it do? Does it do nothing? Make an error? Crash your computer? Make flying monkeys fall from the sky? Give you free waffles? Please clarify. – tckmn Nov 08 '13 at 21:49
  • 1
    Where are you executing the jQuery? Inside a document ready call or after the img element? – j08691 Nov 08 '13 at 21:50
  • @Doorknob: It appears to be doing precisely nothing. – Zyniker Nov 08 '13 at 21:52
  • @j08691: It is called after the ``. – Zyniker Nov 08 '13 at 21:53
  • 2
    @Zyniker Are you getting any errors in the console? – tckmn Nov 08 '13 at 21:53
  • 2
    Works fine in a fiddle http://jsfiddle.net/j08691/cEM6M/ – j08691 Nov 08 '13 at 21:54
  • Are you adding (appending prepending) the image to anything or creating it dynamically in anyway. If so you probably can't do it because it can't wrap something that doesn't exist yet if this is the case check out this link. http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached – John Nov 08 '13 at 22:18
  • @John: I think you may be on to something. The image that I am attempting to class (so that I can apply styles to it more easily) is the (somewhat notorious) smiley that Jetpack uses for statistics purposes. Here is the site on which I'm working: http://barristerbeverages.com/. As you can see, the `` comes right before the script with which I'm attempting to class it. – Zyniker Nov 08 '13 at 22:26
  • @j08691: Thanks for the jsfiddle, it's nice to know that the code by itself works. I think the issue is probably related to what John said as the image is generated dynamically by Jetpack for statistics purposes. – Zyniker Nov 08 '13 at 22:26
  • @Doorknob: No errors of any kind, I think it is probably related to what John said, _supra_. – Zyniker Nov 08 '13 at 22:27
  • @John You can wrap an image without the actual image being loaded... that comment doesn't make sense. Just because the image data isn't loaded yet doesn't mean that the element doesn't exist. – tckmn Nov 08 '13 at 22:30
  • @Doorknob: I'm not actually entirely certain how Jetpack injects that image. It seems likely that it's related to how Jetpack loads the smiley, as the code works when applied to pretty much anything else. – Zyniker Nov 08 '13 at 22:37
  • Shoot your right @doorknob you just need to make sure the element #wrapped-image exists before you can wrap it. Sorry I got confused because I recently did something similar but I needed the height and width of the img that's why I had to wait for the image to load. Doorknob is right. Disregard that code about the image loading that's not important you just need to make sure the element itself is there before you execute. Which more than likely your element is there I just posted this as a possibility. – John Nov 08 '13 at 22:38
  • So just as clarification. You only need to worry about my comment if you added the img element itself or the id dynamically not just the url. – John Nov 08 '13 at 22:41

1 Answers1

0

have you tried putting it inside of $(function() {});?

<script>
$(function(){
    $( '#wrapped-image' ).wrap( '<span class="jquery-wrapped"></span>' );
});
</script>
Juan
  • 4,291
  • 3
  • 36
  • 40