将 jQuery 选择器转换为 HTML 以获取新的 DOM 元素

Posted 2023-05-09

【中文标题】将 jQuery 选择器转换为 HTML 以获取新的 DOM 元素

【英文标题】：Convert jQuery selector to HTML for a new DOM element

【发布时间】：2013-01-06 07:00:09

【问题描述】：

我想实现一个将选择器转换为 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);

【问题讨论】：

您是否因为某些深不可测的原因而被限制使用 CSS 选择器？做var someHTMLElement = $('<div id="my-id" class="my-class">);之类的会更实用。

标准 $('<div>', id: 'my-id', 'class': 'my-class' ) 更具语义性，支持设置属性和其他使用普通选择器无法实现的方法。

目的是在选择器返回一个没有冗余代码的空集时创建元素。 var jqs = $('div#my-id'); if(jqs.length===0) jqs = jqs.create(); var elementWillAlwaysBeThere = jqs.get(0);

据我所知，这在任何库中都没有实现是有原因的。您应该知道您是在创建元素还是更改现有元素，并且不确定的时间应该很少，以至于只需对选择器进行常规长度检查并像上面的答案一样创建元素应该就好了。如果你必须为此创建一个自定义插件，我认为你做错了。

^ 原来它已经作为库实现了

【参考方案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>

愉快的源码阅读

【讨论】：

然后你检查foo = $(selector) 调用的长度，如果它为0，就调用$.zc(foo.selector)