Мне пришлось сделать быструю страницу со «статьями» некоторых сотрудников, очень просто, всего 3 сообщения в блоге примерно по 500 слов каждая. Мой босс хотел, чтобы я сделал так, чтобы мы могли выделить некоторые части текста из каждой статьи в виде цитаты, которая останется внутри текста, перемещаясь либо влево, либо вправо (пример: https://www.digitaldesignjournal.com/wp-content/uploads/2019/10/free-blockquote-design-templates13.png ). Я никогда раньше не использовал JS / JQ, поэтому я попытался просмотреть несколько руководств в Интернете, и вот что у меня есть ниже. Однако, как я уже сказал, я использую sh для «клонирования» и помещаю часть абзаца в его родительский элемент P, который будет отображаться в виде цитаты, но я не могу заставить его работать, так как часть, которую я хотел бы выделение в качестве цитаты либо вообще не отображается, либо отображается не в том месте.
Если я просто скажу prependTo ('p'), цитата, очевидно, появится на каждом P, поэтому, если есть сказать только если он появляется в родительском P, это было бы идеально.
$(document).ready(function() {
var $quote = $(this).parent('p');
$('span.blockquote').clone().prependTo($quote).addClass('quote');
});
.quote {
font-family: Georgia;
font-size: 2em;
font-style: italic;
color: red;
float: left;
text-align: right;
margin-right: 0.5em;
max-width: 9.5em;
padding: 0.5em;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, <span class="blockquote">quis nostrud exercitation</span> 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.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Я не уверен, что делаю неправильно, но опять же, я новичок в этом. Если у кого-то есть решение, я был бы очень признателен.
** edit: извините, если это все еще неясно.