Jquery find if item exists

JayZeeBoy
JayZeeBoy used Ask the Experts™
on
In the below function, how would I see if there is a match for $item and only run the "var copy" part if there is not a match for the $item?

Thank you!
function deleteImage2($item) {
					var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
 
					var copy = $item.clone();
					copy.append(recycle_icon)
					copy.draggable({
 
						cancel: 'a.ui-icon',
						revert: 'invalid',
						helper: 'clone',
						cursor: 'move'
					});
					copy.appendTo($list).fadeIn(function() {
 
						copy.animate({ width: '48px' }).find('img').animate({ height: '36px' });
						copy.find('a.ui-icon-check').remove();
 
					});
					$('ul.gallery > li').click(function(ev) {
						var $item = $(this);
						var $target = $(ev.target);
 
						if ($target.is('a.ui-icon-refresh')) {
							recycleImage($item);
						}
						return false;
					});
 
 
					}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
You can use $item.length to determine how many elements match $item, and use that in an if statement to be sure that it's greater than 0

if ($item.length > 0) {
  var copy = .....
}

Open in new window

Author

Commented:
Can you show my in my example code?

Thanks!

Author

Commented:
I did give it a spin, but $item.length is always 1 - I want to see if that item already exists in the droppable and if so, do not run the var copy code...
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
Can you post some more code, so I can see how this snippet is being used?  I assume that the '$item' that you want to check is the parameter that's passed into the deleteImage2 function?  What exactly is passed to that parameter?  Is it an object, or just a JQ selector?

Author

Commented:
Sure thing!

Here is where I call this snippet:
	// let the trash be droppable, accepting the gallery items
					$trash.droppable({
						accept: '#gallery > *',
						activeClass: 'ui-state-highlight',
						drop: function(ev, ui) {
							deleteImage2(ui.draggable);
							ajaxpack.getAjaxRequest("saveme.asp", "itemid="+ui.draggable.attr("id")+"&itemloc=5&taggerid=<%=visitorid%>", processGetPost, "txt");
 
						}
					});

Open in new window

Commented:
Ah, OK, $item.length will also return 1 because it's always being passed exactly one object..that makes sense.  So it looks like each element has a unique ID, which should be the same after it's cloned.  So we can check and see if there's an element w/ that ID in the droppable element.  Let's see if this works; it should only run the code if the item doesn't already exist.

function deleteImage2($item) {
  if ($('#' + $item.attr('id')).length == 0) {
    var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
  
    var copy = $item.clone();
    copy.append(recycle_icon)
    copy.draggable({
 
            cancel: 'a.ui-icon',
            revert: 'invalid',
            helper: 'clone',
            cursor: 'move'
    });
    copy.appendTo($list).fadeIn(function() {
 
            copy.animate({ width: '48px' }).find('img').animate({ height: '36px' });
            copy.find('a.ui-icon-check').remove();
 
    });
    $('ul.gallery > li').click(function(ev) {
            var $item = $(this);
            var $target = $(ev.target);
 
            if ($target.is('a.ui-icon-refresh')) {
                    recycleImage($item);
            }
            return false;
    });
  }
}

Open in new window

Commented:
oops, i forgot to tell it to search in the $trash droppable:

function deleteImage2($item) {
  if ($('#' + $item.attr('id'), $trash).length == 0) {
    var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
  
    var copy = $item.clone();
    copy.append(recycle_icon)
    copy.draggable({
 
            cancel: 'a.ui-icon',
            revert: 'invalid',
            helper: 'clone',
            cursor: 'move'
    });
    copy.appendTo($list).fadeIn(function() {
 
            copy.animate({ width: '48px' }).find('img').animate({ height: '36px' });
            copy.find('a.ui-icon-check').remove();
 
    });
    $('ul.gallery > li').click(function(ev) {
            var $item = $(this);
            var $target = $(ev.target);
 
            if ($target.is('a.ui-icon-refresh')) {
                    recycleImage($item);
            }
            return false;
    });
  }
}

Open in new window

Author

Commented:
Thanks! I'll give it a spin first thing tmr.! You are awesome, thank you so much!

Author

Commented:
Boooyah!!! That was the trick, thank you!

I've learned how to do this for my other objects too, so double-thanks!!!!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial