2010-05-07 38 views
10

我有一个没有排序的(ul)HTML列表。每个li物品都有一个或多个类别附加到它。 我想通过这个ul列表并获得所有(不同)的类。然后从这个列表中创建一个复选框列表,其值与该类的值匹配,并且其标签与该类的标签相匹配。每个班级一个复选框。使用jQuery获取类的列表

使用jQuery做这件事的最好方法是什么?

+1

你有什么迄今所做? – jweyrich 2010-05-07 09:03:55

+0

目前没有。刚刚建立了清单。我不确定从哪里开始。 – John 2010-05-07 09:27:26

+0

[获取jQuery元素类列表]的可能重复(http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery) – lebolo 2014-03-24 15:52:30

回答

18

试试这个:

// 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! 
+1

你应该检查'this'是否是在将其添加到列表之前为空字符串,以防在类声明中有额外的空格。 – Tgr 2010-05-07 09:16:40

+0

@Tgr完成,谢谢。 – MDCore 2010-05-07 09:22:34

+1

你需要检查''''。如果你按空格分隔,你永远不会得到一个空格,但''a..b'.split('。')'会给出'['a','','b']' – Tgr 2010-05-08 20:48:00

3

我也需要此功能,但作为一个插件,以为我分享......

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; 
}