Karl,
How does this look for an improved version? (im bryan's coworker that
he spoke of)
$(document).ready(function() {
var moveLi = function(el) {
if(!el){
$('#suggestedCategories ul li a')
.click(function() {
$(this).parent().appendTo('#selectedCategories ul');
moveLi($(this));
return false;
});
} else {
$(el).unbind('click')
.click(function() {
var moveTo =
$(this).parents('div')[0].id ==
'suggestedCategories' ? '#selectedCategories ul' :
'#suggestedCategories ul';
$(this).parent().appendTo(moveTo);
moveLi($(this));
return false;
});
}
};
moveLi(null);
});
I added the 'el' parameter so that we dont go back an unbind and
rebind the event handlers on every one of the 'li a' elements each
time only one is clicked. It'll only unbind and rebind the exact one
that was clicked.
Also, I ran Firebug's profiler using the first version of mine that
bryan posted and this new one, and theres not much of a performance
gain. Specifically I was looking at the increase in memory after
'swapping' content 50 times and the number of calls that get made on a
single 'swap'. Both methods made somewhere around 200 JS calls.
Around 70-80 of those were directly to jQuery.
Here's another method that I tried and saw more of a boost. Only
around 112 calls, 52 of which were to jQuery.
$('#suggestedCategories ul li a').click(function() {
$('#selectedCategoriesList').append('<li><a href="#"
onclick="removeItem(this, \'sel\');">' + $(this).text() + '</a></
li>');
$(this.parentNode).remove();
});
});
function removeItem(el, type) {
switch(type){
case 'sel':
$('#suggestedCategories ul').append("<li><a href=\"#\"
onclick=
\"removeItem(this, 'sug');\">" + $(el).text() + "</a></li>");
break;
case 'sug':
$('#selectedCategoriesList').append("<li><a href=\"#\"
onclick=
\"removeItem(this, 'sel');\">" + $(el).text() + "</a></li>");
break;
}
$(el.parentNode).remove();
}
Im pretty new to jQuery but i would imagine all the jQuery selections
and chained calls are whats behind the increased number of JS calls
that im seeing. Would I be correct in thinking this?
And also, theres at least 4 ways we've shown how to get the job done
here, so I think its really down to a Performance vs. Code Readability/
Reusability/Maintenance issue now.
On Jan 10, 12:20 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> Hi Bryan,
>
> I threw something together pretty quickly, so I'm sure it could be
> further improved.
>
> Here is a demo, based on your pastie code:
>
> http://test.learningjquery.com/moveli.html
>
> Here is the jQuery:
>
> $(document).ready(function() {
> var moveLi = function() {
> $('#suggestedCategories, #selectedCategories').find('li
> a').unbind('click').click(function() {
> var moveTo = $(this).parents('div')[0].id ==
> 'suggestedCategories' ? '#selectedCategories ul' :
> '#suggestedCategories ul';
> $(this).parent().appendTo(moveTo);
> moveLi();
> return false;
> });
> };
> moveLi();
>
> });
>
> --Karl
> _________________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Jan 10, 2008, at 10:13 AM, Bryank wrote:
>
>
>
> > Hi Everyone,
>
> > I will make this example as simple as possible.
>
> > I have 2 divs, each containing list items. When an item in box #1 is
> > clicked, I want to move it to box #2. When that same item is clicked
> > in box #2, I want to move it to box #1.
>
> > My co-worker and I are working on this and here is some code he put
> > together:
> >http://pastie.caboo.se/137728
>
> > My original method was using something like this:
>
> > $(document).ready(function() {
>
> > $('#suggestedCategories ul li a').click(function() {
> > $('#selectedCategoriesList').append('<li><a href="#"
> > onclick="removeItem(this); return false;">' + $(this).html() + '</
> > a></
> > li>');
> > $(this.parentNode).remove();
> > });
>
> > });
> > function removeItem(el) {
> > $('#suggestedCategories ul').append('<li><a href="#">' + $(el).html()
> > + '</a></li>');
> > $(el.parentNode).remove();
>
> > }
>
> > I want to know if there is a cleaner easier way to pull this off then
> > what was pasted at:
> >http://pastie.caboo.se/137728
>
> > Thanks,
> > Bryan
