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的標題

回答

相關問題