Есть цитаты на форуме. Я должен разместить «обратную ссылку» через JQuery или Javascript на исходный пост.
Внутри каждой цитаты находится тег span с именем класса «post_id». Идентификатор этого тега span всегда содержит идентификатор исходного сообщения. В этом примере тег span находится в конце каждой цитаты, но его также можно разместить в другом месте.
<blockquote>
<cite>Testuser said:</cite>
<div>This is a test</div>
<span class = "post_id" id = "123"></span>
</blockquote>
<blockquote>
<cite>Testuser2 said:</cite>
<div>This is a test</div>
<span class = "post_id" id = "1234"></span>
</blockquote>
<blockquote>
<cite>Testuser3 said:</cite>
<div>This is a test</div>
<span class = "post_id" id = "12345"></span>
</blockquote>
Есть ли способ, которым я могу переписать имя плаката, которое всегда находится между
<cite></cite>
со ссылкой на оригинальный ID? Примеры должны выглядеть так:
<blockquote>
<cite><a href = "/post-123.html">Testuser said:</a></cite>
<div>This is a test</div>
<span class = "post_id" id = "123"></span>
</blockquote>
<blockquote>
<cite><a href = "/post-1234.html">Testuser2 said:</a></cite>
<div>This is a test</div>
<span class = "post_id" id = "1234"></span>
</blockquote>
<blockquote>
<cite><a href = "/post-12345.html">Testuser3 said:</a></cite>
<div>This is a test</div>
<span class = "post_id" id = "12345"></span>
</blockquote>
Спасибо большое.
да я уже исправил. Вы быстрый. Спасибо
Используя jQuery, вы можете просто получить для каждого blockquote
его дочерний элемент cite
и его значение post-id
. Затем просто замените html на нужный.
Дополнительные (но важные) примечания:
<cite>
..post_id
. Если нет, вы должны прервать переопределение. Если их несколько, вам следует разобраться с делом.Конечно, ничего из вышеперечисленного в образце не происходит, но стоит упомянуть, что вы должны позаботиться и об этом.
$('blockquote').each(function(blockquote){
// Find the <cite> element.
var _cite = $(this).find('cite');
// get the first .post_id's id attribute value.
var _postId = $(this).find('.post_id').first().attr('id');
console.info(_postId); // <-- just a side note. This will be a string. If you need to use such id, remember to make it numeric if you need to use it as a number. You can do that by doing Number(_postId) or, simply, +_postId.
// Generate the new html by generating a new anchor with the desired link.
var newHtml = `<a href = "/post-${_postId}.html">${_cite.html()}</a>`;
// Override the <cite> html.
_cite.html(newHtml);
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<blockquote>
<cite>Testuser said:</cite>
<div>This is a test</div>
<span class = "post_id" id = "123"></span>
</blockquote>
<blockquote>
<cite>Testuser2 said:</cite>
<div>This is a test</div>
<span class = "post_id" id = "1234"></span>
</blockquote>
<blockquote>
<cite>Testuser3 said:</cite>
<div>This is a test</div>
<span class = "post_id" id = "12345"></span>
</blockquote>
Невероятно, как быстро вы. Большое спасибо. Работает как шарм. Отметит ваш ответ как исправленный, когда это возможно. (6 минут до конца)
@LarsVegas Ну, на самом деле это всего лишь одно из возможных решений, я уверен, что есть более умные и быстрые решения. Пожалуйста, взгляните на примечания, которые я написал выше, я настоятельно рекомендую вам пометить их перед использованием в продакшене ;)
иногда встречаются двойные кавычки. Затем внутри цитаты находятся 2 тега цитирования. Можно ли всегда использовать только первый для замены? Спасибо
нашел :) -> var _cite = $(this).find('cite').first();
@LarsVegas да, просто убедитесь, что первый всегда тот, который вы ищете. _cite.length
, если вы не добавите .first
будет хранить количество найденных элементов, если вам это нужно ;)
Ванильный способ JS:
var elements = document.querySelectorAll('.post_id');
elements.forEach(e => {
var testUserID = e.getAttribute('id')
var newlink = document.createElement('a');
newlink.setAttribute('class', 'post');
newlink.setAttribute('href', 'http://example.com/post-'+testUserID+'.html');
newlink.innerHTML = 'test';
var cite = e.parentNode.querySelector("cite")
cite.appendChild(newlink)
})
<blockquote>
<cite>Testuser said:</cite>
<div>This is a test</div>
<span class = "post_id" id = "123"></span>
</blockquote>
<blockquote>
<cite>Testuser2 said:</cite>
<div>This is a test</div>
<span class = "post_id" id = "12222234"></span>
</blockquote>
<blockquote>
<cite>Testuser3 said:</cite>
<div>This is a test</div>
<span class = "post_id" id = "12345"></span>
</blockquote>
Что-то подобное можно было бы сделать вот так. Я предлагаю не использовать jQuery, когда он не нужен. Так что я считаю, что вам это не нужно. Также, если вам нужен более общий способ, я уверен, что вы можете расширить его.
Спасибо большое. Это тоже отличное решение :)
Пожалуйста. Вы должны быть осторожны со многими вещами, но как базовый прототип работает.
Пример выглядит некорректно. Второй href должен быть
/post-1234.html
, верно?