Невозможно получить атрибут заголовка <img>для вставки под <img>, используя jquery + css

Question

Я использую jquery, чтобы получить атрибут заголовка img из изображений в сообщениях на моей странице. По умолчанию изображения всегда заключаются в теги <p> и имеют различные типы плавающих элементов.

Мое решение заключалось в том, чтобы получить стиль изображения и добавить его в соответствующий тег <small>, а затем использовать css position до align это правильно.

Последние два часа я пробовал разные подходы, и теперь у меня нет выбора. Может ли кто-нибудь помочь мне с этим?

вот мой код в его нынешнем виде.

$("p img").each(function(index, element) {
    $(element).wrap("<div class='imgWrapper'></div>");
});


$('img[title], img[style]').after(function() {
  return `<small style="${this.style.cssText}">${this.title}</small>`;
});

.container{
  margin: 0px 100px;
}

.imgWrapper{

}

img{
border: 1px solid #000;
}

img + small {
  color: #C00;
  display: block;
}

small{


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="custom.css">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
  <img style="float: right;" title="Some image title" src="img.jpg" alt="Some image alt" width="656" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<p>
  <img style="float: left;" title="Title title" src="img.jpg" alt="Title title alt" width="325" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<p>
  <img style="float: right;" title="titletitletitle" src="img.jpg" alt="titletitletitle alt" width="656" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>

</div>

Answer 1

Я думаю, вам лучше добавить стили с плавающей точкой к элементу .imgWrapper и удалить с плавающей точкой из img.

$("p img").each(function(index, element) {
    $(element).wrap(`<div class='imgWrapper' style="${element.style.cssText}"></div>`);

});


$('img[title], img[style]').after(function() {
  var el = `<small style="${this.style.cssText}">${this.title}</small>`;
  $(this).css("float", "");
  return el;
});

.container{
  margin: 0px 100px;
}

.imgWrapper img {
    display: block;
}

img{
border: 1px solid #000;
}

img + small {
  color: #C00;
  display: block;
}

small{


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="custom.css">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
  <img style="float: right;" title="Some image title" src="img.jpg" alt="Some image alt" width="656" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<p>
  <img style="float: left;" title="Title title" src="img.jpg" alt="Title title alt" width="325" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<p>
  <img style="float: right;" title="titletitletitle" src="img.jpg" alt="titletitletitle alt" width="656" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>

</div>

Answer 2

На вашем imgWrapper вы можете добавить display: flex; и flex-direction: column;, и это поместит текст под изображением, если это то, что вы ищете.