带有jQuery的动态dom节点

Question

我正在尝试使用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。 任何指导都会有所帮助。

Answer 1

您可以使用jQuery选择share-tools-extended__list类并追加到那里。

例如：

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

    var innerList = $('ul.share-tools-extended__list');
    $.each(socials, function(index, value) {
        // fill in this part with the exact markup you need
        innerList.append($('<li>STUFF</li>'));
    });
}