使用 jQuery 使用 DRY 清理 HTML

Question

我正在尝试找到一种学习 DRY（不要重复自己）的好方法。我有一个包含大量 HTML 的页面。 90% 的 HTML 是重复的，所以我试图找出如何清除它。

在页面上我有几个问题，所有这些问题都有相同的 html 代码，但文本不同。我在这里有一个项目的 jsFiddle http://jsfiddle.net/SBKyW/

    <div class="container_vragen">
        <p class="open_sub">&#x25BC; Heb je al je verplichtingen al geregeld?</p>
        <div class="antwoorden">
            <input id="ja" type="checkbox" value="ja" class="open_sub_ja"/><label for="ja">Ja</label>
            <input id="nee" type="checkbox" value="nee" class="open_sub_nee"/><label for="nee">Nee</label> 
            <div class="extra_info">?
                <div class="extra_info_popup">
                    Hidden tekst
                </div>
            </div>
        </div>  

        <div class="submenu">
            <div>
                <p>Heb je DigiD?</p>
                <div class="antwoorden">
                    <input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
                    <input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label> 
                    <div class="extra_info">?
                        <div class="extra_info_popup">
                            Hidden tekst
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <p>Heb je DigiD?</p>
                <div class="antwoorden">
                    <input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
                    <input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label> 
                    <div class="extra_info">?
                        <div class="extra_info_popup">
                            Hidden tekst
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <p>Heb je DigiD?</p>
                <div class="antwoorden">
                    <input id="ja" type="checkbox" value="ja" class="sub_antwoord ja"/><label for="ja">Ja</label>
                    <input id="nee" type="checkbox" value="nee" class="sub_antwoord nee"/><label for="nee">Nee</label> 
                    <div class="extra_info">?
                        <div class="extra_info_popup">
                            Hidden tekst
                        </div>
                    </div>
                </div>
            </div>
            <p class="akkoord"><br/>Akkoord</p>
            <div class="close_submenu">
                X
                <div class="close_okay">Deze vraag sluiten</div>
            </div>
        </div>
    </div>

这是一个问题所需的 html。每个问题的结构都相同，但显然文本不同。

使用 jQuery 减少我的 html 代码的最佳方法是什么？

Answer 1

在某些情况下，使用客户端模板（也称为 JavaScript 模板）可能是避免重复 HTML 的好方法。

基本上，您可以编写一个 HTML“模板”并将其应用于任意数量的对象。

但是，由于 HTML 会在页面加载时生成，我很确定搜索引擎永远不会看到它。如果我错了，也许有人可以纠正我？

无论如何，如果您认为这可能是您正在寻找的东西，那么那里有很多 JS 模板库。我个人使用 John Resig 的极轻量级解决方案的略微修改版本：http://ejohn.org/blog/javascript-micro-templating/

干杯