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.."/>

我想要的结果：

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

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>

Demo（现在还有额外的小猫！）

Answer 2

查看“.wrap（）”jQuery方法。它允许您将en元素包装在其他容器元素中：

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

如果您需要为容器提供一些属性：

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

Answer 3

如果没有脚本的细节，并且没有正确的话，很难正确回答这个问题。但是，对于一般信息：要将图像添加到div，您可以使用prependTo()或appendTo()。

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

你也可以使用：

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

如果您只想用img包裹div元素，请使用wrap()：

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

Answer 4

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

其中demowrap是img上的id（你可以将其更改为选择你图像的任何内容）。 http://api.jquery.com/wrap/

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

})

Jquery - 添加父级

5 个答案:

HTML

的JavaScript

结果