Customize labels for JavaScript Pagination elements with jQuery

Question

Here is the unedited script:

// for each slide create a list item and link
control.children().each(function(){
    $('.' + option.paginationClass, elem).append('<li><a href="#'+ number +'">'+ (number+1) +'</a></li>');
    number++;
});

This is part of a pagination script. This exert of the script appends markup to each of my slide links within a slideshow, starting with making the first link labeled '1' and adds 1 to each additional slide link; thus, creating a set of navigational links to control the slides. I have four slides so the list of links looks like: '1 2 3 4'... I'm sure you already know what "pagination" is...

How can I do this: I want to be able to edit the above script to output particular, specific markup upon each slide link append (Instead '1 2 3 4'). Below is my edit version of the script with some pseudo code mixed in. You can read it to get a better idea.

Here is my attempt at customizing EACH individual link:

// for each slide create a list item and link
control.children().each(function(){

     if (number = 1) {LABEL = 'Link for slide 1 blah'}
     if (number = 2) {LABEL = 'Lnk for slide 2 boo'}
     if (number = 3) {LABEL = 'Link fore slide 3 foo'}
     if (number = 4) {LABEL = 'Linkage fo slide 4 yoooou'}

     $('.' + option.paginationClass, elem).append('<li><a href="#'+ number +'">'+ (LABEL) +'</a></li>');
     number++;
});

This is a tricky question to ask without a visual demo but someone with great JavaScript/jQuery skills surely can see what is missing or what line(s) need(s) to be added. This will help a ton of UI / UX developers that want an easier way of customizing their pagination links for basic navigation or even slideshows. Thanks in advance!

"I want to be able to edit the above script to output particular, specific markup upon each slide link append"..... How? — Jim22150, Nov 12 '12 at 08:13
With my psudeo attempt only the first "if" works, the other 3 are ignored; therefor all 4 labels have the same "LABEL". The script is missing a way to rename "LABEL" on each append, right now it only renames on the first append. — Jim22150, Nov 12 '12 at 08:21

Ram · Accepted Answer · 2012-11-12T08:45:07.920

1

Well, you are setting the values instead of comparing them, so all of your if statements are true, change:

 if (number = 1) {LABEL = 'Link for slide 1 blah'}

To:

 if (number === 1) {LABEL = 'Link for slide 1 blah'}

Note that the first parameter of each function is index so using ++ operator is not necessary.

control.children().each(function(number){

You can also define an array:

var labels = [
    'The First Label',
    'Second One',
    '...'
];

and code:

 $('.' + option.paginationClass, elem)
   .append('<li><a href="#'+ number +'">'+ labels[number] +'</a></li>');

edited Nov 12 '12 at 08:45

answered Nov 12 '12 at 08:20

Ram

143,282
16
168
197

Thanks for that, I tried '=' and '==' but didn't try '==='; even though it was in the back of my mind. You did answer the question exactly, but I am running into some other problems now with the anchor tags. I made a jsFiddle Demo: http://jsfiddle.net/khJyz/112/. Do I need to modify the anchor append?? Thanks again. – Jim22150 Nov 12 '12 at 08:53
The JS is pretty lengthy but search "LINKZZZ" for the line you edited on THIS demo http://jsfiddle.net/khJyz/113/ – Jim22150 Nov 12 '12 at 08:59
@user1644123 You are welcome, it says that `href` is undefined, you get a `TypeError`, `TypeError: $("." + option.paginationClass + " li." + option.currentClass + " a", elem).attr("href") is undefined ` – Ram Nov 12 '12 at 09:03
It worked before the edits.. Also, I did not get the typeError, I am running FireFox16.0.2/windows and PREV / NEXT buttons work, but the LABEL links do not work correctly. How can I match this with what you already added? – Jim22150 Nov 12 '12 at 09:11
Oh there was a typo in that demo, here is the corrected DEMO: http://jsfiddle.net/khJyz/115/ ... Take a look again. Same problem on my end though. – Jim22150 Nov 12 '12 at 09:17
@user1644123 Please be more specific, there are many scripts in the fiddle, you can post another question for that, the problem is nor related to the appended markup, that is related to the click handler. – Ram Nov 12 '12 at 09:26
the single append line marked "//LINKZZZ" appends the whole string so wouldn't it be part of the same question? It is strange that the var 'number' gets affected by this tweak. – Jim22150 Nov 12 '12 at 09:41
Ok scratch that above demo, I found that using your array fixes the problem. You certainly know your jQuery. Take a look: http://jsfiddle.net/khJyz/128/ – Jim22150 Nov 12 '12 at 14:59

Customize labels for JavaScript Pagination elements with jQuery

1 Answers1