How to insert a piece of code programmatically using jQuery?

Question

I'm learning jQuery and I'd like to use it to solve an old problem that I get. I'd like to use jQuery to add a piece of HTML code programmatically. What I need to do is: create a jQuery function that "parses" all elements/objects that are inside a div. When my function get a img object, then I'd like to put the img inside another div.

To make the things clear, let's suppose that my function parses this piece of code:

<div class="entry">
<img height="200" width="300" src="image-2.jpg" title="my image 1" class="alignnone size-medium wp-image-25">
<em>This is my image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>

<img height="400" width="250" src="image-2.jpg" title="my image 2" class="alignnone size-medium wp-image-25">
<em>This is another image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>
</div>

I'd like to write a jQuery function that changes it to:

<div class="entry">
<div class="main-image">
    <img height="100" width="200" src="image-2.jpg" title="my image 1" class="attachment-single-post-image wp-post-image">
</div>
<em>This is my image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>

<div class="main-image">
    <img height="100" width="200" src="image-2.jpg" title="my image 2" class="attachment-single-post-image wp-post-image">
</div>
<em>This is another image!</em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper.</p>
</div>

Then, "basically" what I want to do is:

Put all img objects between <div class="main-image"> and </div>;
Replace the img's class to attachment-single-post-image wp-post-image;
Replace the imgs height to 100;
Replace the imgs width to 300.

That's it :)

I don't know if my explanation is clear. Unfortunately I'm not a "native" English speaker.

James Curran · Accepted Answer · 2010-07-28 14:20:38Z

3

var searchScope = $('div.entry');

var img = $("img", searchScope)
          .attr("height", 100)
          .attr("width", 300)
          .removeClass()
          .addClass("attachment-single-post-image wp-post-image")
          .wrap("<div class='main-image'></div>")

answered Jul 28, 2010 at 14:20

James Curran

104k37 gold badges186 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to insert a piece of code programmatically using jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related