Jquery - 添加父元素

Question

我是jQuery的新手，遇到了一个问题。

我有一个脚本，可以调整某个div中每个图像的大小。我想将该图像插入不存在的div（创建div-parent），怎么办？

编辑：

我有以下代码：

$('#content img').each(function() {

            if( $(this).width() > maxWidth || $(this).height() > maxHeight )
            {   
                var ratio = 0;
                if( $(this).width() > $(this).height() )
                {
                    ratio = maxWidth / $(this).width();
                    $(this).css('width', maxWidth + 'px');
                    $(this).css('height', ( $(this).height() * ratio) + 'px' );
                }
                else
                {
                    ratio = maxHeight / $(this).height();
                    $(this).css('width', ($(this).width() * ratio) + 'px');
                    $(this).css('height', maxHeight + 'px');
                }

                $(this).addClass('scaled-img');
                $(this).wrap('<div class="test"></div>'); // trying to add

            }                               

            });
});

结果：

<img src="path.."/>

Result that i want:

<div><img src="path"/></div>

- Robik

---

你现在的jQuery是什么样子？你的HTML标记呢？有没有可能提供一个在线演示？ - David Thomas

感谢提供 JS Fiddle 网站链接！太棒了！ - Narmatha Balasundaram

顺便说一下，停止到处包装$（this）。那是非常低效的代码。获取对$（this）返回值的单个引用，并将其保存为局部变量，以便您可以重复使用它：var $this = $（this）; ... if ($this.width() ...) ... 同样，保存计算出的宽度和高度，没有理由继续计算它们。 - Matt Ball

你所贴出的代码可以正常运行：http://jsfiddle.net/wkBzG/ - RoToRa

Answer 1

使用.wrap()方法。

HTML

<div id="some-div">
    <img ... />
    <img ... />
    <img ... />
</div>

JavaScript

$(function ()
{
    $('#some-div > img').wrap('<div class="new-parent"></div>');
});

结果

<div id="some-div">
    <div class="new-parent"><img ... /></div>
    <div class="new-parent"><img ... /></div>
    <div class="new-parent"><img ... /></div>
</div>

演示（现在有更多小猫！）

- Matt Ball

---

+1 个额外的小猫咪！ :) ……还有整个“有用的答案”这件事，我猜…… :/ - David Thomas

这个答案非常有用。谢谢。 - Shilwant Gupta

Answer 2

看一下jQuery中的“.wrap()”方法。它允许你将一个元素包裹在另一个容器元素中：

$('#myImage').wrap('<div></div>');

如果您需要为容器添加一些属性：

$('#myImage').wrap($('<div></div>', {
  id: "newWrapper",
  class: 'wrapper banana',
  css: { 'borderColor': 'green', 'borderWidth': '2px' }
}));

- Pointy

Answer 3

没有您的脚本和样式细节，很难正确回答这个问题。但是，一般情况下：要将图像添加到 div 中，您可以使用 prependTo() 或 appendTo()。

$('img').appendTo('#elementToAddImageTo');

你也可以使用以下方法：

$('#elementToAddImageTo').append($('img'));

如果你只是想用一个 div 包裹 img 元素，那么可以使用 wrap()：

$('img').wrap('<div></div>');

- David Thomas

Answer 4

$('#demowrap').wrap('<div id="parent"></div>');

其中 demowrap 是图像的 ID（您可以根据需要更改此选项）。 http://api.jquery.com/wrap/

- frictionlesspulley

Answer 5

我真的想不明白为什么这些解决方案对我不起作用：

//everything is an array of 14 items
//footer is in my html andi've tested manually adding the <div class="dot></div> and it works

everything.forEach(function(){

  d = document.createElement('div');
  //this console log proves that it is being created 14 times
  console.log(d)

  $(d).addClass("dot").appendTo($('.footer'))

  //or this: $('.footer').append(d);

})

- EJW

---

啊！对于所有未来的读者 - 我的问题是我在头部调用了JavaScript，在HTML创建之前，所以我的JavaScript不知道我试图将其附加到的父元素。 - EJW