将包含隐藏 li 列表的 ul 的 div 从 HTML 转换为 JS答案

【问题标题】：Turning a div that includes a ul with a hidden li list from HTM to JS将包含隐藏 li 列表的 ul 的 div 从 HTML 转换为 JS
【发布时间】：2017-12-20 23:46:01
【问题描述】：

所以我正在练习我的 JS 技能，并希望将我的 HTML 完全或几乎完全转换为 JS。我想专注于创建这些元素并使它们发挥作用。

var main = function() {
        $(document).ready(function () {
            $('.recipePicContainer').click(function () {
                $(this).next('.recipes').toggle("slow").toggleClass('selected');
            });
        });
    };
    $(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContainer col-md-12 col-xs-12">
    
        <div class="checkBoxes">
            <span class="recipePicContainer">
                <img class="recipe" src="../images/grasshopper-cocktail.jpg" alt="Cocktail">
                <div>Cocktail</div>
            </span>
            <ul class="recipes">
               <li class="ingredient"><input type="checkbox"> ingredient 1</li>
               <li class="ingredient"><input type="checkbox"> ingredient 2</li>
               <li class="ingredient"><input type="checkbox"> ingredient 3</li>
               <li class="ingredient"><input type="checkbox"> ingredient 4</li>
               <li class="instructions">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            </ul>
        </div>
    </div>

【问题讨论】：

标签： javascript jquery html createelement

【解决方案1】：

好的，这里的复选框部分弄清楚了：

 $('<input type="checkbox" value="1" />').prependTo(".ingredients");

在循环方面仍然需要一些帮助。有人吗？

【讨论】：