Question

我正在学习jQuery，我想用它来解决我遇到的一个老问题。我想使用jQuery以编程方式添加一段HTML代码。我需要做的是：创建一个jQuery函数，“解析”div内的所有元素/对象。当我的函数获得img个对象时，我想将img放在另一个div内。

为了清楚说明，让我们假设我的函数解析了这段代码：

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

我想编写一个jQuery函数，将其更改为：

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

然后，“基本上”我想做的是：

将所有img个对象放在<div class="main-image">和</div>;
将img的课程改为attachment-single-post-image wp-post-image;
将img的身高替换为100;
将img的宽度替换为300。

就是这样:)）

我不知道我的解释是否清楚。不幸的是，我不是一个“母语”的英语人士。

Answer 1

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

如何使用jQuery以编程方式插入一段代码？

1 个答案: