Question

我希望在“阅读更多”之后隐藏其余段落。链接。截至目前，阅读更多链接被附加到＆＃39;每个＆＃39; p元素。我对jQuery相对较新，如果你能指出我做错了什么会有所帮助。

的jQuery

$('.BlockContent p').each(function() {
    var txt = $(this).text();
    var link = $('#NewsContent .p-name a').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">

  <p><img src="http://placehold.it/600x300"></p>

  <h1 class="p-name"><a href="testPost.html">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.</p>

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

这样的东西？

$('.BlockContent h1 ~ p').hide().first().show().each(function () {
    var txt = $(this).text();
    var link = $('#NewsContent .p-name a').attr("href");

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

http://jsfiddle.net/gaby/nuwnm289/2/

演示

它将隐藏p标记之外的所有h1元素，但第一个除外。在第一个上，它将运行您的代码以添加链接。

Answer 2

如果我理解你的问题，你只想显示第一篇文章片段并隐藏其余部分。

您只需对代码进行以下更改即可使其正常工作。我在你的每个函数中添加了一个i参数作为迭代器使用，如果是then语句则添加额外的p参数来隐藏其他p标记。

Javascript：jsfiddle example - http://jsfiddle.net/larryjoelane/nuwnm289/6/

$('.BlockContent p').each(function(i) {//add the i variable to count iterations

    var txt = $(this).text();


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

    if (txt.length > 5) {


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

    }

    //if i is greater than one
    //or in other words you have looped
    //past the first .BlockContent p tag
    if(i > 1){

        //hide the other paragraphs
        $(this).hide();

    }
});

Answer 3

所以这里有一个解决方案，让你的＆＃34;阅读更多＆＃34;链接工作。

$('.BlockContent p').each(function() {

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

    if (txt.length>5) {
        $(this).html('<span>'+txt.substring(0,5)+'&nbsp;&nbsp;</span><a href="'+link+'" class="show-more"> Read More</a>');
    }

    $(_this).find(".show-more").click(function (event) {

        $(_this).html(txt);

        event.preventDefault();

    });

});

如何在第一次阅读jQuery链接后隐藏内容

3 个答案: