Question

论坛中有引号。我必须通过JQuery或Javascript将“ quote-back-link”放置到原始帖子上。

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

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

非常感谢您。

Answer 1

使用jQuery，您可以简单地为每个blockquote获取其子项cite及其值post-id。然后，只需将html替换为所需的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.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>

Answer 2

香草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。因此，我相信您不需要。另外，如果您需要更通用的方式，我很确定您可以扩展它。

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

2 个答案: