Avatar of newbie27
newbie27Flag for United Kingdom of Great Britain and Northern Ireland asked on

jquery for each loop

Hello Experts,
I am trying to implement list manager using jquery, so far i have managed to create a short list by allowing users to add or remove items with the animation. I am attaching both the screenshot and jquery code, hopefully it may make sense looking at it.
I need couple of more things in it and I am completely stuck as it is proving to be difficult to add or delete all lists at once, i learnt that there is for each loop in jquery but dont know how to use it.
I will add a separate question for my other few issues, please can someone assist me in this?
your help is much appreciated.
regards
sam
<script>//<![CDATA[   
$(document).ready(function(){
	// Extend offset function
	jQuery.fn._offset = jQuery.fn.offset;
	jQuery.fn.extend({
	    offset: function() {
	        var a = arguments;
	        return (a.length) ? this.animate({ top: a[0].top || a[0], left: a[0].left || a[1] }, (a[0].top ? a[1] : a[2]) || 1) : this._offset();
	    }
	});
	// end
	
	// First thing will be to load items from the cookie showShortList()
	// Store as array [RefNo: Title, etc.] then construct <li></li> etc. from this
	
	$('.addToShortList').click(function () { 
	
		var myId = $(this).attr('id') ;
		var theId = myId.replace('_lnk', '');
		var myTitle =  $(this).attr('title') ;
		
		//Don't add the same item again.. [i think that there is a cooler wya to do this]
		var myLi = $('#' + theId + '_li').html();
		if (myLi){
			//this doesn't work on the first click?! we need a better test
			$('#'+myId).mousedown(function(){$('#' + theId + '_li').css('background','#fef8a5')});
			$('#'+myId).mouseup(function(){$('#' + theId + '_li').css('background','')});
			return;
		}
		
		// create div for the animation
		var spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + '; top:' + $(this).offset().top + '; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
		$('#'+ theId + '_spg').offset((($('#shortlist').offset().top)-110), (($('#shortlist').offset().left)-0), 400);
		$(this).animate({opacity: "0.3"}, 500);
		
		//I.E seems to require display:none; followed by .show/slideDown event. FF is OK without!
		$('#shortlist').prepend('<li id="' + theId + '_li" style="display:none;">' + myTitle + ' <a href="#" onclick="removeItem(this); return false;" title="Remove">[-]</a></li>');
		$('#'+  theId + '_li').slideDown("slow");
		$('#'+ theId + '_spg').fadeOut('fast',  function(){$(this).remove()});
		
		
		//alert($(this).offset().top + ', ' + $(this).offset().left + ' >>> ' + $('#shortlist').offset().top + ', ' + $('#shortlist').offset().left);
		//var msg = $('#shortlist').offset().top + ', ' + $('#shortlist').offset().left + '\n';
		//msg += $('#'+ theId + '_spg').offset().top + ', ' + $('#'+ theId + '_spg').offset().left;
		//alert(msg);
		
		//N.B. The page should load the cookie and then set the Add2ShortList buttons to opacity 0.3 - so's you know.. :) use .each fn
		
	});
 
	
 });
 
 
function removeItem(el){
 
	var myId = $(el).parent().attr('id') ;
	var theId = myId.replace('_li', '');
	
	$('#'+myId).slideUp("slow", function(){$(this).remove()});
	$('#'+theId+'_lnk').animate({opacity: "1.0"}, 500);
	
}

Open in new window

screenshot.JPG
JavaScript

Avatar of undefined
Last Comment
hielo

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
hielo

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
newbie27

thanks
hielo

You are welcome!
Your help has saved me hundreds of hours of internet surfing.
fblack61