0
326
VistasCómo obtener el valor del atributo "título" de la imagen en otro elemento usando jQuery
Necesito mostrar el valor del título de la imagen (nombre de clase: media_image) en otra etiqueta p (nombre de clase: media_folder_title) para cada fila. Pero no puedo obtener el valor. He adjuntado el código de muestra aquí.
Captura de pantalla:
Código HTML:
<div id="media-folder"> <div class="media_folder"> <i class="fa fa-folder-open"></i> <img src="/img/artist/default.jpg" alt="5382" title="Test" class="media_image"> <p class="media_folder_title"></p> </div> <div class="media_folder"> <i class="fa fa-folder-open"></i> <img src="/img/artist/default.jpg" alt="5383" title="test1" class="media_image"> <p class="media_folder_title"></p> </div> <div class="media_folder"> <i class="fa fa-folder-open"></i> <img src="/img/artist/default.jpg" alt="5118" title="Uploads" class="media_image"> <p class="media_folder_title"></p> </div> </div>Código jQuery:
$(".media_folder img.media_image").each(function(){ var imgtitle = $(this).attr("title"); console.log(imgtitle); setTimeout(function(){ console.log("settimout ok"); $(this).append("<p>"+imgtitle+"</p>"); }, 3000); });3 Respuestas
Responde la pregunta0
Cambie los selectores en la primera línea a:
.media_folder img .media_imageA veces el espacio es importante.
0
El problema está en el $(this) en el tiempo de espera porque ya no es la imagen sino la ventana.
Además, append tiene como objetivo agregar un elemento dentro de otro elemento. No es posible agregar un elemento dentro de una imagen. Como implica su fragmento, desea agregar la etiqueta p después de la imagen, after es la función correcta para eso.
$(".media_folder img.media_image").each(function() { const $img = $(this); const imgtitle = $img.attr("title"); setTimeout(function() { $img.after("<p>" + imgtitle + "</p>"); }, 3000); }); <div id="media-folder"> <div class="media_folder"> <i class="fa fa-folder-open"></i> <img src="/img/artist/default.jpg" alt="5382" title="Test" class="media_image"> <p class="media_folder_title"></p> </div> <div class="media_folder"> <i class="fa fa-folder-open"></i> <img src="/img/artist/default.jpg" alt="5383" title="test1" class="media_image"> <p class="media_folder_title"></p> </div> <div class="media_folder"> <i class="fa fa-folder-open"></i> <img src="/img/artist/default.jpg" alt="5118" title="Uploads" class="media_image"> <p class="media_folder_title"></p> </div> </div> <script src="https://code.jquery.com/jquery-3.1.0.js"></script>0
Su problema es que está tratando de agregar algo dentro de una etiqueta img , lo cual no es posible, como con algunos otros elementos html.
Lo que estás buscando es $.after()
Prueba $(this).after($('<p />').text(imgtitle))