jQuery .each() issue

[martyd777]

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

[pixelgrid]

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

[martyd777]

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.

[pixelgrid]

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

[martyd777]

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!

[pixelgrid]

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

[martyd777]

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];

[pixelgrid]

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]

[martyd777]

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!

[pixelgrid]

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

[martyd777]

Well, thanks again : )

[Author]

Posts