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

Question

I have the following HTML, needed for a popup modal window:

<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>

I've tested all and works correctly!

Now, i want to create that layout dynamically in jQuery (since the modal window is going to be use in many web pages). Also i want to select some parts of my layout in jQuery, like, for example:

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

I started doing something like this:

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');

    // 
});

But, i don't feel that it's the right way to achieve what i'm looking for... i feel like i'm doing spaghetty coding.

Is there a way to create the layout in jquery in a more intelligent way?

Thanks.

Answer 1

我尝试在google中搜索，因为我确定您在询问之前就做了，我发现这是搜索“在jquery中创建标签的最佳做法”的第一个结果。

Answer 2

You might represent your div structure as a JS object (ie. `div: {..{div:etc}..} , and then add a custom constructor object to your JSON instal via jQuery.extend to print it as html (ie.

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