Add an extra link after the image grabbing the page title url with jQuery
I have a jSfiddle here .
I want to add a read link after the image or after a certain character limit, maybe around 100. But I'm having problems grabbing the link to the page title. I want to make a dynamic script.
Right now my jQuery is written like this:
JQuery
$('.BlockContent p').each(function() {
var txt = $(this).text();
var link = $('#NewsContent .p-name').attr("href");
if (txt.length>5) {
$(this).html('<span>'+txt.substring(0,5)+' </span><a href="link"> Read More</a>');
}
});
My HTML
<div class="BlockContent" id="NewsContent">
<img src="http://placehold.it/600x300">
<h1 class="p-name"><a href="#">Page Title</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in odio mi. Fusce varius urna quis sem viverra id laoreet sem imperdiet. Morbi ultricies varius tortor, in congue ipsum facilisis ut. Suspendisse potenti. Nam ut eros quis orci eleifend rutrum vestibulum adipiscing nisl. Morbi mauris dui, iaculis consequat auctor in, auctor vel velit. Mauris lacinia adipiscing sapien, vel mollis massa pulvinar et. Curabitur eu urna venenatis nisi rhoncus eleifend. Nam dapibus lectus ac libero aliquet id malesuada tortor accumsan. Mauris lacus orci, euismod ac vehicula nec, scelerisque non tortor. Praesent quis odio a elit congue luctus. Aliquam ultricies, massa quis gravida tincidunt, justo mi scelerisque lectus, fringilla hendrerit tortor metus quis tellus. Suspendisse sit amet felis eu erat mollis rhoncus at non ligula. Fusce odio est, consectetur sed scelerisque quis, rhoncus ac lectus. Donec accumsan viverra eros, et vulputate augue laoreet et.</p>
</div>
Can someone point out what I am doing wrong?
source to share
There are a few questions, but you were very close!
The first problem is that your variable is link
meant to target the paragraph tag instead of the anchor tag in the paragraph. You can decide the following:
var link = $('#NewsContent .p-name a').attr("href");
Secondly, when you try to pass your link to the More Info link, you are not merged, so you just passed the link text to href
. You can decide the following:
$(this).html('<span>'+txt.substring(0,5)+' </span><a href="'+link+'"> Read More</a>');
source to share
Your code, to grab the header link, selects the h1 element instead of the anchor inside it.
Edit: var link = $('#NewsContent .p-name').attr("href");
to: var link = $('#NewsContent .p-name a').attr("href");
Then you need to bind this variable correctly in your string:
$(this).html('<span>' + txt.substring(0, 5) + ' </span><a href="'+link+'"> Read More</a>');
source to share