Javascript 从任何jquery选择器字符串创建元素的最有效方法 我需要做什么

我想创建一个匹配任何选择器字符串的元素

举个简单的例子。 输出

为什么？ 我有一些按钮，单击这些按钮可以根据其数据属性执行不同的任务。 其中一个是

数据目标

。我希望能够使用任何sizzlejs/jquery选择器作为目标，如果dom中不存在目标元素，那么就创建它。 e、 g

点击我
单击我

我希望有一种方法可以使用jquery的选择器引擎来实现这一点，因为再次分析选择器字符串并提取其属性似乎非常冗长

---

非常感谢

这不是所有选择器都能做到的，但如果您确信提供的选择器都能工作，我将从以下内容开始：

function createElement(selector) {
    var element = document.createElement('div');

    if (/^[a-z][a-z0-9\-]*/.test(selector)) {
        element = document.createElement(selector.match(/^[a-z][a-z0-9\-]*/)[0]);
    }

    // Wrap in jquery
    element = $(element);

    // Find the classes
    if (/\.([a-z][a-z0-9\-]*)/g.test(selector)) {
        selector.match(/\.([a-z][a-z0-9\-]*)/g).forEach(function (class) {
            element.addClass(class.substr(1));
        });
    }

    // Find the id
    if (/#([a-z][a-z0-9\-]*)/.test(selector)) {
        element.attr('id', selector.match(/#([a-z][a-z0-9\-]*)/)[0]);
    }

    // Find the attributes
    if (/\[([a-z][a-z0-9\-]*)=\'(.+)\'\]/) {
        var match = /\[([a-z][a-z0-9\-]*)=\'(.+)\'\]/.exec(selector);

        element.attr(match[1], match[2]);
    }

    return element;
}

---

我创建了一个插件来解决这个问题

$("a.exaggerated#selector[data-myattr='data-here']").create().appendTo('body');

访问$.find.tokenize方法需要jquery 2.1.1版和obove

$.fn.create = function( elem, dataAndEvents, deepDataAndEvents ) { 

    if(this.length){

        return $(this).clone( elem, dataAndEvents, deepDataAndEvents );

    } else {

    var selector = this.selector;
        var rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/;
        var match, elem, m;

        if(!selector){
            return $(document.createElement('div'));
        } 
        if(match = rquickExpr.exec( selector )){

            if ( match[2] ) {
                return $(document.createElement(selector));
            } else {

                var elem = document.createElement('div');
                if ( (m = match[1]) ) {             
                    elem.id = m;            
                } else if ( (m = match[3])) {
                    elem.className = m ; 
                }
                return $(elem);
            }
        }
        selector = selector.replace( rtrim, "$1" );
        match = $.find.tokenize(selector);

        if ( match.length === 1 ) {

            var attrs = '';
            var tag = 'div';
            var classList = [];
            var type, value, matches;
            var tokens = match[0] = match[0].slice( 0 );

            for (var i = 0; i < tokens.length; i++) {

                type = tokens[i].type;
                value = tokens[i].value
                matches = tokens[i].matches;

                if ( type === "ID" ){
                    attrs += 'id="' + matches[0] + '" ';
                    continue;
                }
                else if ( type === "CLASS" ){
                    classList.push(matches[0]+matches[1]+matches[2]);
                    continue;
                }
                else if ( type === "TAG" ){
                    tag = matches[0];
                    continue;
                }
                else if ( type === "ATTR" ){
                    attrs += matches[0]+ (matches[1] ? matches[1] : '' ) + (matches[2] ? '"' + matches[2] + '"': '' )+ ' ';
                }
                else if ( type === "PSEUDO" ){

                }
                else if ( type === "CHILD" ){

                } 
            };

            if(classList.length){
                attrs += 'class="';
                for (var i = 0; i < classList.length; i++) {
                     attrs +=  classList[i] + ' ';
                };
                attrs += '"';
            }
            return $('<' + tag + ' ' + attrs + '></' + tag + '>');
        }
        return $(document.createElement('div'));
    }
}

$.fn.create=函数（elem、dataAndEvents、deepDataAndEvents）{
如果（此长度）{
返回$（this.clone）（elem、dataAndEvents、deepDataAndEvents）；
}否则{
var选择器=this.selector；
var rquickExpr=/^（？：#（[\w-]+）|（\w+）|\（[\w-]+）$/；
var匹配，elem，m；
如果（！选择器）{
返回$（document.createElement（'div'）；
} 
if（match=rquickExpr.exec（选择器））{
if（匹配[2]）{
返回$（document.createElement（选择器））；
}否则{
var elem=document.createElement（'div'）；
如果（（m=match[1]）{
elem.id=m；
}else如果（（m=匹配[3]））{
elem.className=m；
}
返回元（elem）；
}
}
选择器=选择器。替换（rtrim，“$1”）；
match=$.find.tokenize（选择器）；
if（match.length==1）{
var attrs=''；
var标签='div'；
var classList=[]；
变量类型、值、匹配项；
var-tokens=match[0]=match[0]。切片（0）；
for（var i=0；i

许多字符串只能作为选择器而不是创建者使用，因此使用任何选择器都无法实现您想要的效果。您需要编写一个解析器，将

a.夸张的#选择器[data myattr='data-here']

转换为

。这基本上是将Jade之类的东西（不完全是）编译成HTML。

$("a.exaggerated#selector[data-myattr='data-here']").create().appendTo('body');

$.fn.create = function( elem, dataAndEvents, deepDataAndEvents ) { 

    if(this.length){

        return $(this).clone( elem, dataAndEvents, deepDataAndEvents );

    } else {

    var selector = this.selector;
        var rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/;
        var match, elem, m;

        if(!selector){
            return $(document.createElement('div'));
        } 
        if(match = rquickExpr.exec( selector )){

            if ( match[2] ) {
                return $(document.createElement(selector));
            } else {

                var elem = document.createElement('div');
                if ( (m = match[1]) ) {             
                    elem.id = m;            
                } else if ( (m = match[3])) {
                    elem.className = m ; 
                }
                return $(elem);
            }
        }
        selector = selector.replace( rtrim, "$1" );
        match = $.find.tokenize(selector);

        if ( match.length === 1 ) {

            var attrs = '';
            var tag = 'div';
            var classList = [];
            var type, value, matches;
            var tokens = match[0] = match[0].slice( 0 );

            for (var i = 0; i < tokens.length; i++) {

                type = tokens[i].type;
                value = tokens[i].value
                matches = tokens[i].matches;

                if ( type === "ID" ){
                    attrs += 'id="' + matches[0] + '" ';
                    continue;
                }
                else if ( type === "CLASS" ){
                    classList.push(matches[0]+matches[1]+matches[2]);
                    continue;
                }
                else if ( type === "TAG" ){
                    tag = matches[0];
                    continue;
                }
                else if ( type === "ATTR" ){
                    attrs += matches[0]+ (matches[1] ? matches[1] : '' ) + (matches[2] ? '"' + matches[2] + '"': '' )+ ' ';
                }
                else if ( type === "PSEUDO" ){

                }
                else if ( type === "CHILD" ){

                } 
            };

            if(classList.length){
                attrs += 'class="';
                for (var i = 0; i < classList.length; i++) {
                     attrs +=  classList[i] + ' ';
                };
                attrs += '"';
            }
            return $('<' + tag + ' ' + attrs + '></' + tag + '>');
        }
        return $(document.createElement('div'));
    }
}