javascript - 使用 JQuery 创建动态链接 - 单个帖子 ID

Question

论坛中有引用。我必须通过 JQuery 或 Javascript 将“引用后链接”放置到原始帖子中。

每个 block 引用的内部是带有类名“post_id”的span 标签。该 span 标签的 ID 始终包含原始帖子的 ID。在示例中，span 标记位于每个 block 引用的末尾，但也可以将其放在不同的位置。

<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>

有什么方法可以重写始终在

之间的 Poster-Name

<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>

非常感谢。

Answer 1

使用 jQuery，您可以简单地为每个 blockquote 获取, 它的 child cite及其 post-id值(value)。然后，只需将 html 替换为所需的 html。

旁注(但相关):

• 你应该经常检查是否有 <cite>元素存在。
• 您应该始终检查至少有一个子元素带有 .post_id类(class)。如果没有，您应该中止覆盖。如果超过一个，你应该处理这个案子。
• 我在下面使用了一些 ES6 语法(主要是，我使用 ticks 来解析字符串)。某些浏览器可能不支持它，因此您可能需要转换代码以使其与目标 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.log(_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>