jQuery, issue with .each()

Question

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/

Your delegation syntax here is not valid (not what you expect it to be), delegation with .on() accept only string selector as target parameter; Here, it is like you are binding click on document. BTW, why set it inside an each loop? — A. Wolff, Jul 25 '13 at 12:48

score 2 · Answer 1 · answered Jul 25 '13 at 12:49

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

Update your jsFiddle and repost link ;-) – Pieter Jul 25 '13 at 12:50 — Pieter, Jul 25 '13 at 12:50

score 2 · Accepted Answer · answered Jul 25 '13 at 12:50

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

thanks a lot for answering and for teaching me .data, I'm having a look right now — user2461031, Jul 25 '13 at 12:54

score 0 · Answer 3 · answered Jul 25 '13 at 12:58

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

I made the following changes :

store previous html in data of the '.test' sentence.
on click on a '.more' element, find its closest parent that is a '.test' element. parent() would also work fine in this case.
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'));
});

});

score 0 · Answer 4 · answered Jul 25 '13 at 13:01

0

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

answered Jul 25 '13 at 13:01

Bharat

21
2

jQuery, issue with .each()

4 Answers4