Verwenden Sie jQuery, um eine Liste der Klassen zu erhalten

Question

Ich habe eine unbestellte (ul) HTML-Liste. Jedem li Element sind 1 oder mehr Klassen zugeordnet. Ich möchte durch diese ul Liste gehen und alle (distinct) Klassen bekommen. Dann erstellen Sie aus dieser Liste eine Liste von Kontrollkästchen, deren Wert mit dem der Klasse übereinstimmt und dessen Label dem der Klasse entspricht. Ein Kontrollkästchen für jede Klasse.

Was ist der beste Weg, dies mit jQuery zu tun?

Answer 1

Try this:

// get the unique list of classnames 
classes = {}; 
$('#the_ul li').each(function() { 
    $($(this).attr('class').split(' ')).each(function() { 
     if (this !== '') { 
      classes[this] = this; 
     }  
    }); 
}); 

//build the classnames 
checkboxes = ''; 
for (class_name in classes) { 
    checkboxes += '<label for="'+class_name+'">'+class_name+'</label><input id="'+class_name+'" type="checkbox" value="'+class_name+'" />'; 
}; 

//profit! 

Answer 2

i auch diese Funktionalität benötigt aber als Plugin, dachte ich, es zu teilen ...

jQuery.fn.getClasses = function(){ 
    var ca = this.attr('class'); 
    var rval = []; 
    if(ca && ca.length && ca.split){ 
    ca = jQuery.trim(ca); /* strip leading and trailing spaces */ 
    ca = ca.replace(/\s+/g,' '); /* remove doube spaces */ 
    rval = ca.split(' '); 
    } 
    return rval; 
}