http://jsfiddle.net/rfnslyr/Zxav9/1/
我想输入一个HTML代码块,让它唯一地提取所有CSS类和ID。问题是,它将以下每个视为唯一的单一类。
<div class="test hello"></div>
<div class="test hello"></div>
<div class="test hello bye"></div>
<div class="test hello bye yes"></div>
这是我的控制台输出:
0:test hello
1:test hello
2:test hello bye
3:test hello bye yes
uniqueNames["test hello", "test hello bye", "test hello bye yes"]
理想情况下,我的控制台输出应该如下:
0:test hello
1:test hello
2:test hello bye
3:test hello bye yes
uniqueNames["test", "hello", "bye", "yes"]
功能
$(function() {
$('#submitCode').click(function() {
var CSS_CLASSES = [];
var CSS_IDS = [];
var el = document.createElement( 'div' );
var text = $("#codeInput").val();
el.innerHTML = text;
var nodes = el.getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if(node.id.length > 0) {
CSS_IDS.push(node.id);
}
if(node.className.length > 0) {
CSS_CLASSES.push(node.className);
}
}
var uniqueNames = [];
$.each(CSS_CLASSES, function(i, el){
if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
});
console.log(uniqueNames + " --- " + uniqueNames.length);
});
});
答案 0 :(得分:2)
您需要在空格(split(/\s+/)
)上拆分类名,试试这个:
$(function() {
$('#submitCode').click(function() {
var CSS_CLASSES = [];
var CSS_IDS = [];
var el = document.createElement( 'div' );
var text = $("#codeInput").val();
el.innerHTML = text;
var nodes = el.getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if(node.id.length > 0) {
CSS_IDS.push(node.id);
}
if(node.className.length > 0) {
var classNames = node.classNamesplit(/\s+/);
for (var j = 0; j < classNames.length; j++) {
CSS_CLASSES.push(classNames[j]);
}
}
}
var uniqueNames = [];
$.each(CSS_CLASSES, function(i, el){
if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
});
console.log(uniqueNames + " --- " + uniqueNames.length);
});
});
答案 1 :(得分:2)
这可以在一行中完成:
CSS_CLASSES.push.apply(CSS_CLASSES, node.className.split(" "));
JSFiddle:http://jsfiddle.net/w645W/
基本上,JavaScript apply()
调用push()
并将一个参数列表作为数组提交给CSS_CLASSES。 .split(" ")
方便地为我们提供了一系列由空格分隔的术语。
答案 2 :(得分:1)
你从未真正拆分数组。使用此:
$.each(CSS_CLASSES, function (i, el) {
console.log(i + ":" + el);
var splitted = el.split(' ');
for (var j = 0; j < splitted.length; j++) {
if ($.inArray(splitted[j], uniqueNames) === -1)
uniqueNames.push(splitted[j]);
}
});