JQuery - 이미지 찾기, attr에서 캡션 추가

Question

저는 JQuery에 익숙하지 않고 푸른 달에 한 번만 발끝 딥니다. 그러나, 나는 신속한 해결책을 찾을 수 없다는 확신이있다. 빠른 해결책이 반드시 있어야한다는 내 확신에도 불구하고 :)

나는 텍스트가 텍스트 사이에 떠 다니는 div가있다. 해당 div를 스캔하여 그 안에있는 모든 이미지를 선택하고 클래스를 지정하고 <p></p>을 추가 한 다음 <img>과 일치하는 <p>을 자체 래핑 div에 넣으려고합니다. 그 단락 블록을 만든 다음이 이미지의 title 속성을 배치하려고합니다.

Google과 여기에서 사용해 보았지만 둘 다 플러그인을 다루는 스 니펫으로 코팅되어 있지만 포함 된 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 코딩을 변명하십시오!

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

페이지 자체를 보지 않고 도우미 코드를 제공하기는 어렵지만 아래의 스 니펫에있는 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

(의 그것의 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에 <p></p>을 추가하고 단락에 텍스트를 추가하십시오.내가 생각할 수있는

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

이게 나 같은 초보자를위한 간단한 코드를 찾고있는 사람에게 도움이되기를 바랍니다.