처음 jQuery와 더 많은 링크를 읽은 후 내용을 숨기는 방법

Question

'더 읽기'링크 뒤에 나머지 단락을 숨기고 싶습니다. 지금은 더 많은 링크가 '각 요소'에 추가됩니다. 나는 당신이 내가 뭘 잘못하고 있다는 것을 지적 할 수 있다면 jQuery에 비교적 익숙하다. 이 같은

Here is my jsFiddle

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

뭔가? http://jsfiddle.net/gaby/nuwnm289/2/

---

에서

$('.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>'); 
    } 
}); 

데모 그것은 첫번째 제외한 h1 태그 folowing p 모든 요소를 ​​숨길. 처음에는 링크를 추가하기위한 코드가 실행됩니다.

Answer 2

그래서 "읽기 더 많은"링크가 작동하도록하는 해결책이 있습니다.

$('.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(); 

    }); 

}); 

Answer 3

질문을 올바르게 이해하면 첫 번째 기사 발췌문 만 표시하고 나머지는 숨기고 싶습니다.

코드를 수정하면 다음과 같이 변경하면됩니다. 필자는 각 함수에 i 매개 변수를 추가하여 반복자로 사용하고 추가로 if then 문을 사용하여 다른 p 태그를 숨 깁니다.

자바 스크립트 : jsfiddle 예 - 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(); 

    } 
});