在图像后添加阅读更多链接，同时使用 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>');
    }
}); 

我的网页

<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>');

js小提琴示例

Answer 2

有一些问题，但你非常接近！

第一个问题是您的link变量以段落标签而不是段落中的锚标签为目标。你可以这样解决这个问题：

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

其次，当您尝试将链接传递到"阅读更多"链接时，您

没有连接，因此您只是将文本"链接"传递到href中。你可以这样解决这个问题：

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

更新的小提琴

Answer 3

您正在选择带有类p-name的h1，而您正在寻找子"a"标签

修复选择器，您就可以开始了。

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