CODEWITHSUNDEEP
jqueryeach
user2461031
user2461031

Reputation: 513

jQuery, issue with .each()

I want to reduce every sentence which has more than 3 letters, my code is showing the first 3 letters, then it adds "...", by clicking on these "..." I want to show the whole sentence. But when I'm clicking on every single "..." it reveals every sentence instead of the very sentence I clicked on.

My code is:

$('.test').each(function(){
    var el = $(this);
    var textOri = el.html();
    if(textOri.length > 3){
        el.html(textOri.substring(0,3)+'<span class="more">...</span>');
    }

    $(document).on('click', el.find('.more'), function() {
            el.html(textOri);
    });
});

here a jsFiddle: http://jsfiddle.net/malamine_kebe/GxDsJ/

Upvotes: 1

Views: 333

Answers (4)

Bharat
Bharat

Reputation: 21

You want to show full text by click on it. Just change $(document) to $(el).

$(el).on('click', el.find('.more'), function() {
        el.html(textOri);
});

Upvotes: 0

CodeToad
CodeToad

Reputation: 4724

here is a working fiddle: http://jsfiddle.net/GxDsJ/3/

I made the following changes :

  1. store previous html in data of the '.test' sentence.

  2. on click on a '.more' element, find its closest parent that is a '.test' element. parent() would also work fine in this case.

  3. on the '.test' element, change html back to the hml stored in its data.

NOTE: you may wish to not capture click on the entire document, but on the closest ancestor node shared by the '.more' elements. This will improve performance.

$('.test').each(function(){
var el = $(this);
var textOri = el.html();
if(textOri.length > 3){
    el.data('full-text', textOri);
    el.html(textOri.substring(0,3)+'<span class="more">...</span>');
}

$(document).on('click', '.more', function() {
    var $test = $(this).closest('.test');
    $test.html($test.data('full-text'));
});

});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The syntax you've got for the click handler isn't correct, mostly because it's inside the each loop, but also because you're not limiting the text swapping to the element which was clicked. Try this:

$('.test').each(function(){
    var $el = $(this);
    var originalText = $el.html();
    if (originalText.length > 3) {
        $el.html(originalText.substring(0,3) + '<span class="more">...</span>');
    }
    $el.data('original-text', originalText);
});

$(document).on('click', '.more', function() {
    var $test = $(this).closest('.test')
    $test.html($test.data('original-text'));
});

Updated fiddle

Upvotes: 2

Spokey
Spokey

Reputation: 10994

There are some problems with your .on() syntax and the that you included it in the each loop, alternatively you must save your original text somewhere to be used later on when you user clicks

$('.test').each(function () {
    var el = $(this);
    var textOri = el.text();
    if (textOri.length > 3) {
        el.html(textOri.substring(0, 3) + '<span class="more" data-default='+textOri+'>...</span>');
    }

});

$(document).on('click', '.more', function () {
    $(this).parent().text($(this).data('default'));
});

FIXED FIDDLE

Upvotes: 2

Related Questions