Lars Vegas
Lars Vegas

Reputation: 231

Create dynamic links with JQuery - individual post id

There are quotes in a forum. I have to place a "quote-back-link" via JQuery or Javascript to the original post.

Inside of each blockquote is span tag with the class name "post_id". The ID of that span tag contains always the ID of the original post. In the example the span tag is at the end of each blockquote, but its also possible to place it on a different position.

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

Is there any way that I can rewrite the Poster-Name that is always between

<cite></cite>

with a link to the original ID? The examples have to look like:

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

Thank you very much.

Upvotes: 1

Views: 117

Answers (2)

stavgian
stavgian

Reputation: 121

Vanilla JS Way:

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>

Something like that could be done like this. I suggest not using jQuery when not needed. So I believe you do not need that. Also if you need a more generic way I am pretty sure you can extend this.

Upvotes: 0

briosheje
briosheje

Reputation: 7446

Using jQuery, you can simply acquire, for each blockquote, its child cite and its post-id value. Then, just replace the html with the desired one.

Side (but relevant) notes:

  • You should always check whether a <cite> element exists.
  • You should always check that there is at least one child element with .post_id class. If there is none, you should abort the override. If there is more than one, you should handle the case.
  • I'm using some ES6 syntax below (mostly, I'm using the ticks to parse strings). Some browsers may not support it, so you may want to convert the code to make it compliant to the targeted javascript version.

Of course, none of the above happens in the sample, but it's worth mentioning that you should take care of that as well.

$('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>

Upvotes: 3

Related Questions