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选择driver_id类并附加到那里。

例如：

share-tools-extended__list

带有jquery的动态dom节点

1 个答案: