Grow your CSS skills. Land your dream job.

jQuery .each() issue

  • # May 22, 2013 at 5:43 pm

    Using jQuery, I’ve cut off text that exceed a certain character limit, after which I’ve appended a link. The link opens a lightbox-type div and is SUPPOSED to load respective content within. For example, if the user clicked on the third ‘See more’ link, the third paragraph (just above that link) is supposed to load in the lightbox/div. Currently, the last paragraph is being loaded no matter what ‘see more’ link is clicked. Can anyone spot the issue in my code? Do I need to make a seperate loop, or, possibly, iterate a variable to pass the different paragraphs.

    Code:



    Link to live example:

    http://www.llt-group.com/clients/estelle-international/server/rescue-skin-care-product.html

    # May 22, 2013 at 6:12 pm

    par in your example keeps the text from your last paragraph because at the end of the each function the last item used is your last paragraph.

    you can use

    $(‘#more’).text($(this).text());

    which will just display the modified text with the read more link

    Those issues are usually handled within a cms by redirecting the user to the full article.
    What i came up with is kinda dirty but might get you to the right direction the idea is to keep the full paragraph adding a class to the text which is more than 215 characters to hide it .
    the see more text is also a span with a class of more so when you have to display the text for a paragraph you toggle the class that hides the text from the see more and the hidden text.

    http://codepen.io/seraphzz/pen/lILfx

    its a bit confusing but works .In my pen works by clicking anywhere you have to adapt it to change the text anytime someone hits the more text

    # May 22, 2013 at 6:23 pm

    Thanks for the response. I looked at your example, which works great, but I’m not sure how I would implement your technique in my example, which uses a lightbox-ish function. I’m more familiar with PHP, which can be used to create different variables upon each iteration. I’m wondering if the same can be done with jQuery? For example:

    for(i = 0; i == 5; i++) {

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

    }

    I actually tried doing this, but I was having issues with ‘par‘. This was considering invalid syntax. Is there a jQuery specific way to accomplish this? I believe this works in PHP. If I can accomplish this in jQuery, this may be the solution to my problem.

    # May 22, 2013 at 6:45 pm

    you could use the array.push method so in your situation
    par.push($(this).text());
    which will store all of your paragraphs but with no way knowing when a see more link is press which one it is .
    You can add a new class to each description like par0 par1 etc and get the number of the paragraph like so

    var number = $(‘paragraph clicked’).attr(‘class’).match(/d/)[0];
    par[number];

    if there is another number in any class of the description this wont work .
    now you dont have any

    # May 22, 2013 at 6:59 pm

    Awesome suggestion! However, I’ve never worked with these functions, so you’ll have to excuse my ignorance. I’ve built an array, as you’ve suggested, but I’m having trouble using the ‘var number = $()…’ portion of your suggestion. My code follows:




    I’ve added alert(arrary); after it’s creation, and all paragraphs have successfully been stored within. Now, how do I use what you’ve provided to .append() them to respective paragraphs?

    Thanks for your help in advance!

    # May 22, 2013 at 7:20 pm

    try this

    $(document).ready(function(){
    var array = [];
    $(‘.fifty p.description’).each(function(i){

    len=$(this).text().length;

    if (len>215) {

    var par = $(this).text();
    array.push(par);

    $(this).text($(this).text().substr(0,215)+’…’).append(“see more”);
    }

    });

    $(‘.fifty a’).click(function(){
    var number = $(this).parent().attr(‘class’).match(/d/)[0];
    $(‘#more’).text(array[number]);
    $(‘#close’).fadeIn();
    $(‘#more’).fadeIn();
    });

    $(‘#close’).click(function(){

    $(‘#close’).fadeOut();

    $(‘#more’).fadeOut();

    });

    })

    remember that you have to add numbered classes for each paragraph like item0 item1 or par0,par1

    also

    $(this).text($(this).text().substr(0,215)+’…’).append(“see more”);

    can be simplified to

    $(this).text($(this).text().substr(0,215)+’…see more’);

    # May 22, 2013 at 7:39 pm

    Excellent! That did the trick. Better yet, I comprehend most of the code! The only bit that is unclear to mear is:

    var number = $(this).parent().attr(‘class’).match(/d/)[0];

    # May 22, 2013 at 7:45 pm

    this code is executed when a link is clicked so $(this) in this case refers to the anchor (a)

    $(this).parent() is the parent of the anchor meaning the paragraph tag containing the text

    $(this).parent().attr(‘class’) is the class attribute of the paragraph like ‘description item0′

    /d/ is a regular expression that matches a number if you wanted more than one number that is next to the first one /d+/

    .match returns an array of results
    the number you are looking for its the only result to the zero indexed array so [0]

    # May 22, 2013 at 8:06 pm

    Thank you so much! You not only helped me solve the problem, but learn a new concept. You seemed to respond with your own knowledge. How long have you been at jQuery? This is my second week getting involved with it, and I must say, I like it so far. Css-tricks has been my go-to source of troubleshooting. I’ve got a long way to gay, but I’m having fun in the process. Thanks again!

    # May 22, 2013 at 8:15 pm

    im into javascript/jquery for about a year myself its a really great and powerfull language. totally worth the time.
    The forums here is a great place to ask questions if you ever need to. always someone willing to help

    # May 22, 2013 at 8:17 pm

    Well, thanks again : )

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".