Question

我有以下小提琴，它提取CSS类和ID，并将它们发布到控制台。我想在顶部框中键入一个名称，粘贴一些代码，并让它生成一组独立的css ID和类到#classes实例的新实例（其中包含uin0CE +一堆类）它）。

我已将该帖子发送到控制台完成，我只是不知道每次向#classes添加新名称时如何“生成”#codeName部分的新实例代码#codeInput。

的index.html

    <div id="container">
        <input id="codeName" class="boxsizingBorder"></input><br>
        <textarea id="codeInput" class="boxsizingBorder"></textarea><br>
        <button id="submitCode">submit</button>
        <div id="classes">
            <div class="pageTitle">uin0CE</div>
            <div class="cssClassesIDs">
ui-icon-nodisc,redDotClass,translate,test,ui-hide-label,ui-grid-a,ui-block-a,ui-block-b,alignRight,ui-grid-solo,ui-disabled,companyFieldset,longbutton,icon-map-marker,locationIcon,icon-phone,contactIcon,legalBlock,legal,legalDivider,signInInfoIcon,icon-info-sign,ui-icon-alt
            </div>
        </div>
    </div>
    <script src="functions.js"></script>

functions.js

$(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.apply(CSS_IDS, node.id.split(" ")); 
            }
            if (node.className.length > 0) {
                CSS_CLASSES.push.apply(CSS_CLASSES, node.className.split(" "));   
            }
        }

        var uniqueNames = [];
        $.each (CSS_CLASSES, function(i, el){
            if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
        });     

        console.log(uniqueNames + " --- " + uniqueNames.length);
    });
});

Answer 1

编辑：我将此添加到您的小提琴中：

 //Added this section here
    var name = $('#codeName').val();
    var code = uniqueNames;

    $('#classes').empty();
    $('#classes').append('<div class="pageTitle">'+name+'</div>');
    $('#classes').append('<div class="cssClassesIDs">'+code+'</div>');

这里有更新的小提琴：http://jsfiddle.net/CRqXm/4/

我希望我能正确地回答你的问题，但这似乎是你正在寻找的。

在提交时附加一块CSS

1 个答案: