如何在 jQuery 中使用 selectos 创建 HTML 布局答案

【问题标题】：How to create a HTML layout with selectos in jQuery如何在 jQuery 中使用 selectos 创建 HTML 布局
【发布时间】：2014-03-31 09:11:05
【问题描述】：

我有以下 HTML，需要弹出模式窗口：

<div id="modal-overlay">
    <a href="#" class="modal-close">[close]</a>
</div>

<div id="modal">
    <div id="modal-content">
        <div id="modal-image"></div>
    </div>

    <a href="#" class="modal-prev">previous</a>
    <a href="#" class="modal-next">next</a>
</div>

我已经测试了所有并且可以正常工作！

现在，我想在 jQuery 中动态创建该布局（因为模式窗口将在许多网页中使用）。我还想在 jQuery 中选择我的布局的某些部分，例如：

var content = $('#modal-content');
var image = $('#modal-image');
var next = $('.modal-next');
var prev = $('.modal-prev');
var close = $('.modal-close');

我开始做这样的事情：

var overlay = '<div id="modal-overlay"></div>';

$(document).ready(function(){

    // add the mask for modal window
    $('body').append(overlay);

    // assign it to a selector
    var overlay = $('#modal-overlay');

    // 
});

但是，我觉得这不是实现我正在寻找的东西的正确方法......我觉得我在做意大利面条式的编码。

有没有办法在 jquery 中以更智能的方式创建布局？

谢谢。

【问题讨论】：

“使用选择器在 jquery 中创建布局”是什么意思？
@undefined：我的意思是创建上面的 HTML 布局并将其附加到。我明白了你的问题，我编辑了我的帖子，所以它更清楚。对不起

标签： jquery html

【解决方案1】：

我尝试在 google 中进行搜索，我确信您在询问之前已经这样做了，我发现 this 作为搜索“在 jquery 中创建标签的最佳实践”的第一个结果。

【讨论】：

是的，我正在阅读有关该主题的所有信息，我觉得我试图太花哨，也许我忘记了性能。由于我在 PHP 中完成所有这些操作，因此我将在 php 页面中创建布局并使用 include... 简单且最适合性能。

【解决方案2】：

您可以将您的 div 结构表示为 JS 对象（即`div: {..{div:etc}..}，然后通过 jQuery.extend 将自定义构造函数对象添加到您的 JSON 安装中以将其打印为 html（即。

for element in modal.scheme: //whatever best suits your data, either compile a string and use $(selector).html() or by .append()。

【讨论】：