JQuery - 查找图像，添加来自attr的标题

我完全不（完全）熟悉JQuery，只能在蓝色的月亮中蘸一下脚趾。然而，我需要我根本无法找到一个快速解决方案 - 尽管我相信这样一个快速解决方案必须可用:)JQuery - 查找图像，添加来自attr的标题

我有一个div，其中的图像可能会在文本之间浮动。我想扫描那个div，选择其中的所有图像（如果有的话），给他们一个课，给他们添加一个，并将<img>和匹配放在他们自己的包装div中。在创建的段落块中，我想要放置所述图像的标题属性。

我已经试过谷歌和这里，但都涂有片段处理插件，而我只是想要一个即插即用片段，我可以放在我包括的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', ''); 
});

代码的最后部分是采取的图像的主定位属性（裕度和浮动）并将它们应用于之前创建的包装div。然后，我从图像中自己抹去这些值以避免加倍。打扰一下noobish编码吧！

来源

2012-01-05 Eamonn

你实际上不能追加anythi ng''标签，但您可以在''之后附加它。 – Blazemonger 2012-01-05 20:25:23

如果你的意思是它会在图片标签后出现，那就没问题了。假设两者都将包裹在他们自己的div中。 – Eamonn 2012-01-05 20:28:35

$("#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。

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

来源

2012-01-05 20:27:44

我只会改变一件事。好吧，其实四个。我会在开头添加一个var me = $（this），并将所有$（this）改为“me”。 – 2012-01-05 20:29:51

工程！谢谢你，先生:) @马里奥，这种替代提高这种查询的速度吗？ – Eamonn 2012-01-05 20:42:37

@Eamonn这是微型优化，我不会担心。很多人在函数中使用'$（this）'没有任何问题。 – 2012-01-05 20:44:25

很难给你助手代码没有看到页面本身，但也许你可以通过身边的一些在下面的这段中发现的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)); 
}

来源

2012-01-05 20:28:35 buley

请小心['.attr']（http://stackoverflow.com/questions/5874652/prop-vs-attr）。 – 2012-01-05 20:31:33

为了行动在div每个图像上（假设其ID为“myDiv”），你可以使用下面的功能：

$('#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上，然后将文本附加到段落中。

来源

2012-01-05 20:28:50 yoozer8

我能想到的最简单的办法是这样的：

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

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

来源

2012-01-05 20:29:26 Blazemonger

粘贴它（将#div_id更改为合适的类名称，但没有喜悦，它位于整个document.ready函数中） – Eamonn 2012-01-05 20:36:25

它可以在jsFiddle中工作，也许如果您将原始HTML结构添加到原始问题中？ – Blazemonger 2012-01-05 20:39:52

我发现这些代码帮助全给我，并与外挂程式简单的方式这样做，

$('#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(); 
    });

希望这可以帮助那些正在寻找像我这样的初学者的简单代码的人

来源

2012-12-31 11:34:45 vinod

JQuery - 查找图像，添加来自attr的标题

回答

相关问题