Создание динамических ссылок с помощью JQuery — индивидуальный идентификатор сообщения

Есть цитаты на форуме. Я должен разместить «обратную ссылку» через 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>

Спасибо большое.

Пример выглядит некорректно. Второй href должен быть /post-1234.html, верно?

briosheje 30.05.2019 12:05

да я уже исправил. Вы быстрый. Спасибо

Lars Vegas 30.05.2019 12:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
72
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используя jQuery, вы можете просто получить для каждого blockquote его дочерний элемент cite и его значение post-id. Затем просто замените html на нужный.

Дополнительные (но важные) примечания:

  • Вы всегда должны проверять, существует ли элемент <cite>.
  • Вы всегда должны проверять наличие хотя бы одного дочернего элемента с классом .post_id. Если нет, вы должны прервать переопределение. Если их несколько, вам следует разобраться с делом.
  • Я использую некоторый синтаксис ES6 ниже (в основном я использую тики для разбора строк). Некоторые браузеры могут не поддерживать его, поэтому вы можете преобразовать код, чтобы сделать его совместимым с целевой версией javascript.

Конечно, ничего из вышеперечисленного в образце не происходит, но стоит упомянуть, что вы должны позаботиться и об этом.

$('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 минут до конца)

Lars Vegas 30.05.2019 12:12

@LarsVegas Ну, на самом деле это всего лишь одно из возможных решений, я уверен, что есть более умные и быстрые решения. Пожалуйста, взгляните на примечания, которые я написал выше, я настоятельно рекомендую вам пометить их перед использованием в продакшене ;)

briosheje 30.05.2019 12:13

иногда встречаются двойные кавычки. Затем внутри цитаты находятся 2 тега цитирования. Можно ли всегда использовать только первый для замены? Спасибо

Lars Vegas 30.05.2019 16:16

нашел :) -> var _cite = $(this).find('cite').first();

Lars Vegas 30.05.2019 16:18

@LarsVegas да, просто убедитесь, что первый всегда тот, который вы ищете. _cite.length, если вы не добавите .first будет хранить количество найденных элементов, если вам это нужно ;)

briosheje 30.05.2019 16:53

Ванильный способ 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, когда он не нужен. Так что я считаю, что вам это не нужно. Также, если вам нужен более общий способ, я уверен, что вы можете расширить его.

Спасибо большое. Это тоже отличное решение :)

Lars Vegas 30.05.2019 16:14

Пожалуйста. Вы должны быть осторожны со многими вещами, но как базовый прототип работает.

stavgian 30.05.2019 16:23

Другие вопросы по теме