पैराग्राफ अनुच्छेद पहले 100 वर्ण और अधिक/कम लिंक

Question

के साथ शेष दावे को दिखाने/छिपाने के लिए पैराग्राफ की बाकी सामग्री को छुपाएं मेरे पास पैराग्राफ है जिसमें 500 से अधिक वर्ण हैं। मैं केवल शुरुआती 100 चरित्र प्राप्त करना चाहता हूं और बाकी को छुपा सकता हूं। इसके अलावा मैं 100 चरित्र के बगल में "अधिक" लिंक डालना चाहता हूं। अधिक लिंक के अनुच्छेद पर क्लिक करने के लिए "अधिक" टेक्स्ट को "कम" पर प्रदर्शित और संपादित करना चाहिए और "कम" पर क्लिक करना चाहिए, इसे व्यवहार को टॉगल करना चाहिए। पैराग्राफ गतिशील रूप से जेनरेट किया गया है Iwrap() का उपयोग करके इसकी सामग्री को लपेट नहीं सकता। यहां उदाहरण है कि मेरे पास क्या है और मैं क्या चाहता हूं।

यह है कि मैं क्या है:

<p>It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is that 
    it has a more-or-less normal distribution of letters, as opposed to using 'Content 
    content here', making it look like readable English. Many desktop publishing packages 
    and web page editors now use Lorem Ipsum as their default model text.</p> 

यह वह जगह है जो मैं चाहता जब डोम लोड

<p>It is a long established fact that a reader will be distracted by ..More</p> 

यह वह जगह है जो मैं चाहता जब उपयोगकर्ता क्लिक "अधिक"

<p>It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is that 
    it has a more-or-less normal distribution of letters, as opposed to using 'Content 
    content here', making it look like readable English. Many desktop publishing packages 
    and web page editors now use Lorem Ipsum as their default model text. ..Less</p> 

जब हम "कम" पर क्लिक करते हैं, तो इसे "अधिक" पर क्लिक करने पर क्या करना चाहिए।

मैं विभाजित करने के लिए jQuery का उपयोग कर रहा हूं, टुकड़ा कर रहा हूं और उस अवधि में सबस्ट्रिंग लपेटता हूं जिसे मैं छिपाना चाहता हूं लेकिन यह काम नहीं करता है।

var title = $("p").text(); 
var shortText = jQuery.trim(title).substring(100, 1000).split(" ") 
    .slice(0, -1).join(" ") + "...More >>"; 
shortText.wrap('</span>'); 

Answer 1

फिडल: http://jsfiddle.net/iambriansreed/bjdSF/

jQuery:

jQuery(function(){ 

    var minimized_elements = $('p.minimize'); 
    var minimize_character_count = 100;  

    minimized_elements.each(function(){  
     var t = $(this).text();   
     if(t.length < minimize_character_count) return; 

     $(this).html(
      t.slice(0,minimize_character_count)+'<span>... </span><a href="#" class="more">More</a>'+ 
      '<span style="display:none;">'+ t.slice(minimize_character_count ,t.length)+' <a href="#" class="less">Less</a></span>' 
     ); 

    }); 

    $('a.more', minimized_elements).click(function(event){ 
     event.preventDefault(); 
     $(this).hide().prev().hide(); 
     $(this).next().show();   
    }); 

    $('a.less', minimized_elements).click(function(event){ 
     event.preventDefault(); 
     $(this).parent().hide().prev().show().prev().show();  
    }); 

});​ 

Answer 2

क्या आपने jQuery Truncator प्लगइन देखा है?

यह वही है जो आपने वर्णित किया है।

Answer 3

यह शीर्ष Google परिणाम नहीं है, लेकिन मैंने jQuery Expander plugin का उपयोग बड़ी सफलता के लिए किया है। यह अच्छा है क्योंकि यह खोज इंजन रोबोट से कुछ छुपा नहीं है।

Answer 4

यह कुछ अन्य लोगों ने मुझे यह करने के लिए हरा की तरह दिखता है, लेकिन यहाँ है कि मैं क्या के साथ आया है।

var MORE = "... More...", 
    LESS = " Less..."; 

$(function(){ 
    $("p").each(function(){ 
     var $ths = $(this), 
      txt = $ths.text(); 

     //Clear the text 
     $ths.text(""); 

     //First 100 chars 
     $ths.append($("<span>").text(txt.substr(0,100))); 

     //The rest 
     $ths.append($("<span>").text(txt.substr(100, txt.length)).hide()); 

     //More link 
     $ths.append(
      $("<a>").text(MORE).click(function(){ 
       var $ths = $(this); 

       if($ths.text() == MORE){ 
        $ths.prev().show(); 
        $ths.text(LESS); 
       } 
       else{ 
        $ths.prev().hide(); 
        $ths.text(MORE); 
       } 
      }) 
     ); 
    }); 
}); 

Answer 5

धन्यवाद उसके अच्छा समारोह के लिए @iambriansreed के लिए, यहाँ लाइन पर truncate अनुच्छेद पर एक मामूली संशोधन breakes है:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
jQuery(function(){ 

var minimized_elements = $('p.minimize'); 
var maxLines = 20; 

minimized_elements.each(function(){  
    // var textArr = $(this).text().split(/\n/); // Not supported in IE < 9 
    var textArr = $(this).html().replace(/\n?<br>/gi,"<br>").split(/<br>/); 
    var countLines = textArr.length; 

    if (countLines > maxLines) { 
     text_less = textArr.slice(0, maxLines).join("<br>"); 
     text_more = textArr.slice(maxLines, countLines).join("<br>"); 
    } 
    else return; 

    $(this).html(
     text_less + '<span>... </span><a href="#" class="more">More</a>'+ 
     '<span style="display:none;">'+ text_more +' <a href="#" class="less">Less</a></span>' 
    ); 
}); 

$('a.more', minimized_elements).click(function(event){ 
    event.preventDefault(); 
    $(this).hide().prev().hide(); 
    $(this).next().show();   
}); 

$('a.less', minimized_elements).click(function(event){ 
    event.preventDefault(); 
    $(this).parent().hide().prev().show().prev().show();  
}); 

}); 

</script> 

Answer 6

हर किसी के लिए

जो यहाँ आ गया है और अधिक शो के लिए खोज ... यहां एक और प्लग-इन http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/