在使用jQuery获取页面标题URL的同时,在图像之后添加读取更多链接

Question

我这里有一个jSfiddle 文件.

我想在图像之后或在某个字符限制之后添加一个读取更多链接可能在100左右.但是我有问题抓住页面标题的链接.我想让脚本动态化.

现在我的jQuery就是这样写的.

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)+'&nbsp;&nbsp;</span><a href="link"> Read More</a>');
    }
}); 

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

谁能指出我做错了什么？

Answer 1

您获取标题链接的代码是选择h1元素而不是其中的锚点.

更改: var link = $('#NewsContent .p-name').attr("href");

至: var link = $('#NewsContent .p-name a').attr("href");

然后,您需要在字符串中正确连接该变量:

$(this).html('<span>' + txt.substring(0, 5) + '&nbsp;&nbsp;</span><a href="'+link+'"> Read More</a>');

jsFiddle例子