动态 dom 节点与 jquery

我正在尝试使用 jquery 动态生成一块 html。我不知道如何在代码中添加嵌套循环以生成我的目标html - 可在下面找到。

<div class="daily-featured__video-social">
    <ul class="share-tools__daily-featured share-tools">
        <li class="share-tools__item share-tools__item--extended">
            <div class="share-tools-extended is-below-middle">
                <span class="share-tools__tool share-tools__tool--share">
                    <span class="share-tools__tool__text">SHARE</span>
                    <div class="share-tools-extended__caret"></div>
                </span>
                <ul class="share-tools-extended__list">
                    <li class="share-tools-extended__list--item share-tools-extended__list--item--facebook">
                        <span class="share-tools-extended__tool share-tools-extended__tool--facebook">
                            <span class="share-tools-extended__tool__text">Facebook</span>
                        </span>
                    </li>
                    <li class="share-tools-extended__list--item share-tools-extended__list--item--twitter">
                        <span class="share-tools-extended__tool share-tools-extended__tool--twitter">
                            <span class="share-tools-extended__tool__text">Twitter</span>
                        </span>
                    </li>
                    <li class="share-tools-extended__list--item share-tools-extended__list--item--tumblr">
                        <span class="share-tools-extended__tool share-tools-extended__tool--tumblr">
                            <span class="share-tools-extended__tool__text">Tumblr</span>
                        </span>
                    </li>
                    <li class="share-tools-extended__list--item share-tools-extended__list--item--pinterest">
                        <span class="share-tools-extended__tool share-tools-extended__tool--pinterest">
                            <span class="share-tools-extended__tool__text">Pinterest</span>
                        </span>
                    </li>
                    <li class="share-tools-extended__list--item share-tools-extended__list--item--google-plus">
                        <span class="share-tools-extended__tool share-tools-extended__tool--google-plus">
                            <span class="share-tools-extended__tool__text">Google+</span>
                        </span>
                    </li>
                    <li class="share-tools-extended__list--item share-tools-extended__list--item--email">
                        <span class="share-tools-extended__tool share-tools-extended__tool--email">
                            <span class="share-tools-extended__tool__text">Email</span>
                        </span>
                    </li>
                </ul>
            </div>
        </li>
        <li class="share-tools__item share-tools__item--save the-save-button">
            <span class="share-tools__tool share-tools__tool--save ">
                <span class="share-tools__tool__text">SAVE</span>
            </span>
        </li>
    </ul>
</div> 

到目前为止我写的代码：

<div class="daily-featured__video-social">
    <ul class="share-tools__daily-featured share-tools">
    </ul>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        var memlist = $(".daily-featured__video-social ul");
        var members = {
            share: "SHARE",
            save: "SAVE"
        };
        var share_tools = $(".share-tools-extended__list");
        var socials = {
            facebook: "Facebook",
            twitter: "Twitter",
            tumblr: "Tumblr",
            pinterest: "Pinterest",
            'google-plus': "Google+",
            email: "Email"
        };
        $.each(members, function(index, value) {
                if (index == "share") {
                memlist.append($('<li class="share-tools__item share-tools__item--extended">' +
                    '<div class="share-tools-extended is-below-middle">' +
                    '<span class="share-tools__tool share-tools__tool--share">' +
                    '<span class="share-tools__tool__text">' + value +
                    '</span>' +
                    '<div class="share-tools-extended__caret"></div>' +
                    '</span>' +
                    '<ul class="share-tools-extended__list">'+
                    '</ul>' +
                    '</div>' +
                    '</li>'));
            }
            if (index == "save") {
                memlist.append($('<li class="share-tools__item share-tools__item--save the-save-button">' +
                    '<span class="share-tools__tool share-tools__tool--' + index + '">' +
                    '<span class="share-tools__tool__text">' + value +
                    '</span>' +
                    '</span>' +
                    "</li>"));
            }
        });
    });
</script>

这将生成以下输出：

<div class="daily-featured__video-social">
    <ul class="share-tools__daily-featured share-tools">
        <li class="share-tools__item share-tools__item--extended">
            <div class="share-tools-extended is-below-middle">
                <span class="share-tools__tool share-tools__tool--share">
                    <span class="share-tools__tool__text">SHARE</span>
                    <div class="share-tools-extended__caret"></div>
                </span>
                <ul class="share-tools-extended__list"></ul>
            </div>
        </li>
        <li class="share-tools__item share-tools__item--save the-save-button">
            <span class="share-tools__tool share-tools__tool--save">
                <span class="share-tools__tool__text">SAVE</span>
            </span>
        </li>
    </ul>
</div>

请注意，我需要在<ul class="share-tools-extended__list"></ul>中使用第二个循环，为此我准备了一个数组，例如：

var socials = {
    facebook: "Facebook",
    twitter: "Twitter",
    tumblr: "Tumblr",
    pinterest: "Pinterest",
    'google-plus': "Google+",
    email: "Email"
};

我不太熟悉javascript和jquery。任何指导都会有所帮助。