Question

我（根本不）熟悉JQuery，只在蓝色的月亮中舔过我的脚趾。但是，我有一个需要，我根本无法找到一个快速的解决方案 - 尽管我坚信必须提供这样一个快速的解决方案：）

我有一个div，其中的图像可以在文本中浮动。我想扫描那个div，选择其中的所有图像（如果有的话），给他们一个班级，给他们贴一个，并将<img>和匹配的括在他们自己的包裹div。然后，在创建的段落块中，我想放置所述图像的title属性。

我已经尝试了谷歌和这里，但两者都涂有处理插件的片段，而我只想要一个即插即用的片段，我可以放在我的包含的js文件中。我试过在JQuery网站上自己拼凑一些东西，但这很麻烦。

任何帮助都非常感谢！

编辑：使用下面的@ Xeon06提供的答案，我完成的工作解决方案如下：

$(".lorem img").each(function() { 
    $(this).addClass("inline-img"); 
    $(this).wrap("<div>"); 
    if ($(this).prop("title")!='') {
        $("<p>").text($(this).prop("title")).insertAfter($(this)); 
    }
});

$(".lorem div").each(function() { 
    $(this).addClass("inline-img-wrap"); 
});

$(".inline-img").each(function() { 
    var mTop = $(this).css('marginTop');
    var mBottom = $(this).css('marginBottom');
    var mLeft = $(this).css('marginLeft');
    var mRight = $(this).css('marginRight');
    var thisfloat = $(this).css('float');
    $(this).parent().css('marginTop', mTop);
    $(this).css('marginTop', '');
    $(this).parent().css('marginBottom', mBottom);
    $(this).css('marginBottom', '');
    $(this).parent().css('marginLeft', mLeft);
    $(this).css('marginLeft', '');
    $(this).parent().css('marginRight', mRight);
    $(this).css('marginRight', '');
    $(this).parent().css('float', thisfloat );
    $(this).css('float', '');
});

代码的最后一部分是获取图像的主要定位属性（margin和float），然后将它们应用于之前创建的包装div。然后，我从图像本身擦除这些值，以避免倍增。请原谅noobish编码！

Answer 1

$("#yourdiv img").each(function() { //Loops through the images in a specific div. $(this) represents the current image in the loop
    $(this).addClass("yourclass"); //Add a class
    $(this).wrap("<div>"); //Add a wrapping div
    $("<p>").text($(this).prop("title")).insertAfter($(this)); //Create a new paragraph with the title property of the image as text and put it after the image (inside our newly created div)
});

试图在评论中尽可能地解释。 Here is a live example

如果有任何问题或您想要任何澄清，请不要犹豫。

Answer 2

很难在没有看到页面本身的情况下给你帮助代码，但也许你可以从谷歌搜索下面的snippit中找到的一些jQuery方法开始。

var images = jQuery( '#div_id' ).find( 'img' );
var x = 0, imglen = images.length, pic;
foreach( x = 0; x < imglen; x += 1 ) {
   pic = images[ x ];
   jQuery( pic ).replaceWith( jQuery( "<p>" + pic.attr( 'title' ) + "</p>" ).addClass( 'className' ).append( pic ) );
}

Answer 3

为了对div中的每个图像采取行动（让我们假设其ID为＆＃34; myDiv＆＃34;），您将使用以下函数：

$('#myDiv img').each(function(i) {
    //Do stuff to the image, which can be referred to as $(this)
}

然后对每张图片进行操作。

我建议改变你描述它的顺序。您要使用的功能是wrap（doc），append（doc）和addClass（doc）。将图像换行到新div中，将附加到新div，然后将文本附加到段落中。

Answer 4

我能想到的最短路是：

$('#div_id').find('img').wrap('<div>').after(function() {
    return $('<p>').text($(this).attr('title'));
});

http://jsfiddle.net/mblase75/ey76x/

Answer 5

我发现这些代码对我有用，并且可以通过插件轻松完成，

$('#portfolio li img').each(function() {
        $("<h4>").text($(this).attr("title")).insertAfter($(this)); }); 
    $('#portfolio li').hover(function(){
        $(this).children('h4').slideDown();
    },function(){
        $(this).children('h4').slideUp();
    });

希望这有助于为像我这样的初学者寻找简单代码的人

JQuery - 查找图像，从attr添加标题

5 个答案: