Мне нужно отобразить значение заголовка изображения (имя класса: media_image) в другом теге p (имя класса: media_folder_title) для каждой строки. Но я не могу получить значение. Я прикрепил пример кода здесь.

Снимок экрана:

enter image description here

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>

Код 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);
});
1
Vetrivel Pandiyarajan 3 Фев 2022 в 10:41

3 ответа

Лучший ответ

Проблема с $(this) в тайм-ауте, потому что это уже не изображение, а окно.

Кроме того, append стремится добавить элемент внутри другого элемента. Невозможно добавить элемент внутри изображения. Как следует из вашего фрагмента, вы хотите добавить тег p после изображения, after - правильная функция для этого.

$(".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>
1
Mosh Feu 3 Фев 2022 в 10:54
Спасибо за вашу поддержку, это работает. :)
 – 
Vetrivel Pandiyarajan
3 Фев 2022 в 11:01
Хороший вызов, попытка доступа к заголовку в этом случае возвращает заголовок документа. OP, требуется ли тайм-аут или будет достаточно использовать fadeIn() или show(), если элемент должен стать видимым позже?
 – 
Lalalena
3 Фев 2022 в 11:02

Измените селекторы в первой строке на:

.media_folder img .media_image

Иногда пространство важно.

1
Henryc17 3 Фев 2022 в 10:51
1
Это ничего не изменит, так как OP хочет выбрать изображение с классом .media_image, а не элемент в теге
 – 
Lalalena
3 Фев 2022 в 10:53
1
.media_image — это имя класса тега . Итак, если мы используем пробел, то имя класса .media_image считается дочерним элементом тега .
 – 
Vetrivel Pandiyarajan
3 Фев 2022 в 10:55
Нет - Это просто гарантирует, что это никогда не сработает.
 – 
Stender
3 Фев 2022 в 11:01

Ваша проблема в том, что вы пытаетесь добавить что-то внутри тега img, что невозможно, как и в случае с несколькими другими элементами html.

То, что вы ищете, это $.after()

Попробуйте $(this).after($('<p />').text(imgtitle))

0
Lalalena 3 Фев 2022 в 10:55