jQuery - With click of a link copy all classes from one element to another

(see jsfiddle example)

When the ".link_to_rule_them_all" is clicked i would like to copy all the '.link_to_rule_them_all span' classes into #box and clear the '#box' be开发者_StackOverflowtween every click.

my example code and the explanation is here http://jsfiddle.net/znCmq/2/

As you can see i have no idea about the js of this.. any ideas? eh..

---

$('.link_to_rule_them_all').bind('click', function(e) {
    e.preventDefault();
    $('#box').attr('class', ($('span', $(this)).attr('class')));
});

live example : http://jsfiddle.net/moeishaa/3t33d/

---

Use this:

<a class="link_to_rule_them_all" href="javascript://">

$('.link_to_rule_them_all').click(function() {
 $('#box').attr('class',$(this).attr('class'))    
})

It's proper form to use a null href instead of a hash.

---

First of all, you can add the listener directly to the span like this:

$('span').click(function(e) {

Then you can add the class attribute to the DIV

$('#box').append($(e.target).attr('class'));

Ok let's try this then

$('.link_to_rule_them_all').click(function(e) {
//if you wanna attribute the span classes to the #box as classes
var box = $('#box')
box.removeClass();
box.addClass($(this).children('span').attr('class'));
})

If you wanna add the span class as TEXT:

$('.link_to_rule_them_all').click(function(e) {
var box = $('#box');
box.text();
box.append($(this).children('span').attr('class'));
)}