将 jQuery 选择器转换为 HTML 以创建新的 DOM 元素

Question

我想实现一个将选择器转换为 HTML 的 jQuery 插件。我知道这两种语法之间的映射是多对多的，但是简单的选择器很容易转换为 HTML。

示例：

$('div#my-id.my-class').create();

可能会生成：

<div id="my-id" class="my-class" />

编辑： 目的是在选择器返回空集时创建一个元素，而无需添加冗余代码。

var jqs = $('div#my-id');
if(jqs.length===0) jqs = jqs.create();
var elementWillAlwaysBeThere = jqs.get(0);

Answer 1

我知道这可能不是您想要的。项目 zen 编码是关于使用类似 css 的语法来创建 dom 结构。所以我认为查看源代码会对你有很大帮助，即使你它不是纯粹的 css 选择器。

div#wrapper>ul#imageSlider>li.image$*3

编译为：

<div id="wrapper">
    <ul id="imageSlider">
        <li class="image1"></li>
        <li class="image2"></li>
        <li class="image3"></li>
    </ul>
</div>

所以如果你在哪里使用 jQuery 端口，你可以像这样做你的例子

$.zc("div#my-id.my-class")

再次导致

<div id="my-id" class="my-class"></div>

快乐源代码阅读

Answer 2

// 从选择器添加或更改 DOM 元素的内容

function addDomes(pap, el, cnt='', rpos='append'){
    if($(pap).find(el).length) pap=$(pap).find(el);
    else if(rpos=='append'||rpos=='prepend'){
        var selp=el.split(/([ #.])/);
        var s=0;
        var nel='';
        var attrs='';
        var cel={id:'',cls:'',tag:'div'};
        while(s<selp.length+1){
            if(!selp[s]||selp[s]==' '||selp[s]=='>'||s==selp.length){
                nel=$('<'+cel.tag+(cel.id?' id="'+cel.id.substring(1)+'"':'')+(cel.cls?' cls="'+cel.cls.substring(1)+'"':'')+(attrs||'')+'></'+cel.tag+'>');
                if(rpos=='prepend') $(pap).prepend(nel);
                else $(pap).append(nel);
                pap=nel;
                attrs=''; cel={id:'',cls:'',tag:'div'};
                s++;
            }else{
                var cis='';
                if(selp[s]=='#') cis='id';
                else if(selp[s]=='.') cis='cls';
                if(cis) s++;
                if(selp[s].indexOf('[')>=0){
                    var attr=between(selp[s], '[',']');
                    if(attr){
                        selp[s]=selp[s].replace('['+attr+']','');
                        attrs+=' '+attr;
                    }
                }
                if(cis) cel[cis]+=' '+selp[s];
                else cel.tag=selp[s];
            }
            s++;
        }
    }
    $(pap).html(cnt);
}