Reputation: 231
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
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
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:
<cite>
element exists..post_id
class. If there is none, you should abort the override. If there is more than one, you should handle the case.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